

<!DOCTYPE html>
<html lang="zh-CN" data-default-color-scheme=&#34;auto&#34;>



<head>
  <meta charset="UTF-8">
  <link rel="apple-touch-icon" sizes="76x76" href="/img/insert1.png">
  <link rel="icon" href="/img/insert1.png">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, shrink-to-fit=no">
  <meta http-equiv="x-ua-compatible" content="ie=edge">
  
  <meta name="theme-color" content="#2f4154">
  
    <meta name="description" content="无聊的人生只剩下无尽的空虚。">
  
  <meta name="author" content="Mike Taylor">
  <meta name="keywords" content="我的博客">
  
  <title>JavaScript高级-JSON和DOM操作 - Mike Taylor</title>

  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" />


  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/github-markdown-css@4.0.0/github-markdown.min.css" />
  <link  rel="stylesheet" href="/lib/hint/hint.min.css" />

  
    
    
      
      <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/highlight.js@10.4.0/styles/github-gist.min.css" />
    
  

  
    <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />
  



<!-- 主题依赖的图标库，不要自行修改 -->

<link rel="stylesheet" href="//at.alicdn.com/t/font_1749284_ba1fz6golrf.css">



<link rel="stylesheet" href="//at.alicdn.com/t/font_1736178_kmeydafke9r.css">


<link  rel="stylesheet" href="/css/main.css" />

<!-- 自定义样式保持在最底部 -->


  <script id="fluid-configs">
    var Fluid = window.Fluid || {};
    var CONFIG = {"hostname":"gitee.com","root":"/","version":"1.8.8","typing":{"enable":true,"typeSpeed":30,"cursorChar":"|","loop":false},"anchorjs":{"enable":true,"element":"h1,h2,h3,h4,h5,h6","placement":"right","visible":"hover","icon":""},"progressbar":{"enable":true,"height_px":3,"color":"#29d","options":{"showSpinner":false,"trickleSpeed":100}},"copy_btn":true,"image_zoom":{"enable":true},"toc":{"enable":true,"headingSelector":"h1,h2,h3,h4,h5,h6","collapseDepth":0},"lazyload":{"enable":true,"onlypost":false},"web_analytics":{"enable":false,"baidu":null,"google":null,"gtag":null,"tencent":{"sid":null,"cid":null},"woyaola":null,"cnzz":null,"leancloud":{"app_id":null,"app_key":null,"server_url":null}}};
  </script>
  <script  src="/js/utils.js" ></script>
  <script  src="/js/color-schema.js" ></script>
</head>


<body>
  <header style="height: 70vh;">
    <nav id="navbar" class="navbar fixed-top  navbar-expand-lg navbar-dark scrolling-navbar">
  <div class="container">
    <a class="navbar-brand"
       href="/">&nbsp;<strong>Mike Taylor's</strong>&nbsp;</a>

    <button id="navbar-toggler-btn" class="navbar-toggler" type="button" data-toggle="collapse"
            data-target="#navbarSupportedContent"
            aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
      <div class="animated-icon"><span></span><span></span><span></span></div>
    </button>

    <!-- Collapsible content -->
    <div class="collapse navbar-collapse" id="navbarSupportedContent">
      <ul class="navbar-nav ml-auto text-center">
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/">
                <i class="iconfont icon-home-fill"></i>
                主页
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/archives/">
                <i class="iconfont icon-archive-fill"></i>
                日志
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/categories/">
                <i class="iconfont icon-category-fill"></i>
                目录
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/tags/">
                <i class="iconfont icon-tags-fill"></i>
                标签
              </a>
            </li>
          
        
          
          
          
          
            <li class="nav-item">
              <a class="nav-link" href="/about/">
                <i class="iconfont icon-user-fill"></i>
                个人
              </a>
            </li>
          
        
        
          <li class="nav-item" id="search-btn">
            <a class="nav-link" data-toggle="modal" data-target="#modalSearch">&nbsp;<i
                class="iconfont icon-search"></i>&nbsp;</a>
          </li>
        
        
          <li class="nav-item" id="color-toggle-btn">
            <a class="nav-link" href="javascript:">&nbsp;<i
                class="iconfont icon-dark" id="color-toggle-icon"></i>&nbsp;</a>
          </li>
        
      </ul>
    </div>
  </div>
</nav>

    <div class="banner" id="banner" parallax=true
         style="background: url('/img/default.png') no-repeat center center;
           background-size: cover;">
      <div class="full-bg-img">
        <div class="mask flex-center" style="background-color: rgba(0, 0, 0, 0.3)">
          <div class="page-header text-center fade-in-up">
            <span class="h2" id="subtitle" title="JavaScript高级-JSON和DOM操作">
              
            </span>

            
              <div class="mt-3">
  
    <span class="post-meta mr-2">
      <i class="iconfont icon-author" aria-hidden="true"></i>
      Mike Taylor
    </span>
  
  
    <span class="post-meta">
      <i class="iconfont icon-date-fill" aria-hidden="true"></i>
      <time datetime="2021-05-31 22:40" pubdate>
        2021年5月31日 晚上
      </time>
    </span>
  
</div>

<div class="mt-1">
  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-chart"></i>
      12.2k 字
    </span>
  

  
    
    <span class="post-meta mr-2">
      <i class="iconfont icon-clock-fill"></i>
      
      
      179
       分钟
    </span>
  

  
  
    
      <!-- 不蒜子统计文章PV -->
      <span id="busuanzi_container_page_pv" style="display: none">
        <i class="iconfont icon-eye" aria-hidden="true"></i>
        <span id="busuanzi_value_page_pv"></span> 次
      </span>
    
  
</div>

            
          </div>

          
        </div>
      </div>
    </div>
  </header>

  <main>
    
      

<div class="container-fluid nopadding-x">
  <div class="row nomargin-x">
    <div class="d-none d-lg-block col-lg-2"></div>
    <div class="col-lg-8 nopadding-x-md">
      <div class="container nopadding-x-md" id="board-ctn">
        <div class="py-5" id="board">
          <article class="post-content mx-auto">
            <!-- SEO header -->
            <h1 style="display: none">JavaScript高级-JSON和DOM操作</h1>
            
              <p class="note note-info">
                
                  本文最后更新于：2021年6月2日 晚上
                
              </p>
            
            <div class="markdown-body">
              <h1 id="第17章-JavaScript高级-JSON和DOM操作"><a href="#第17章-JavaScript高级-JSON和DOM操作" class="headerlink" title="第17章 JavaScript高级-JSON和DOM操作"></a>第17章 JavaScript高级-JSON和DOM操作</h1><p><strong>课程提要</strong></p>
<ul>
<li><p>JSON </p>
</li>
<li><p>DOM介绍 </p>
</li>
<li><p>节点操作 </p>
</li>
<li><p>节点属性操作 </p>
</li>
<li><p>节点文本操作 </p>
</li>
<li><p>DOM节点样式操作</p>
</li>
</ul>
<h2 id="17-1-JSON"><a href="#17-1-JSON" class="headerlink" title="17.1 JSON"></a>17.1 JSON</h2><h3 id="17-1-1-JSON语法"><a href="#17-1-1-JSON语法" class="headerlink" title="17.1.1 JSON语法"></a>17.1.1 JSON语法</h3><p>JSON(EMA制定的一个数据表示规范，是ECMAScript的一个子集)和XML(EXtensible Markup Language，可扩展标记语言)类型，都是一种结构化的数据表示方式。所以，JSON并不是JavaScript独有的数据格式，其他很多 语言都可以对JSON进行解析和序列化。 </p>
<p>JavaScript Object Notation，JS对象简谱，一种轻量级数据交换格式，<strong>用独立编程语言的文本格式来存储和表示数据</strong>，优点是易于阅读和编写，同时也易于浏览器解析和生成，并有效提升网络传输速率。</p>
<p>与XML对比，JSON书写或解析时是一个对象，更容易解析，而XML是由用户自定义标签存储数据的，对于前端而言不易书写，且解析困难。</p>
<p>JSON文件内容：它可以是一个对象，可以是一个数组，也可以是数组和对象的结合。</p>
<p>JSON写在哪：可以写在JavaScript代码中，也可以形成一个独立的.json文本文件。</p>
<ul>
<li><p>JS中书写JSON：</p>
<ul>
<li>果是对象，键可以用单或双引号引起来，也可以不加引号；</li>
<li>如果值是字符串，可以用单引号或双引号引起来；</li>
<li>数值型、逻辑型、null不能加引号。</li>
</ul>
</li>
<li><p>独立的JSON文件书写：</p>
<ul>
<li>文件扩展名必须是.json，不能出现其他编程代码，它只是一个文本文件而已。</li>
<li>数据不能赋给某个变量；</li>
<li>键必须用双引号引起来；</li>
<li>值如果是字符型数据，必须用双引号引起来，其他类型的数据不能用引号括起来；</li>
<li>在JSON文件中不能添加任何注释！</li>
</ul>
</li>
<li><p>JSON的语法可以表示三种类型的值：</p>
<ul>
<li>简单值：可以在JSON中表示字符串、数值、布尔值和null。但JSON不支持JavaScript中的特殊undefined。 </li>
<li>对象：顾名思义。 </li>
<li>数组：顾名思义。</li>
</ul>
</li>
<li><p>实际开发：在实际开发过程中，如果后台工程师还没创建好后台数据接口时，前端工程师可以先做数据mock，即数据模拟，写对应的CSS/HTML/JS代码，等后台数据可以调用时，再进行替换即可。</p>
</li>
<li><p>项目开发中，数据最好分离出来，形成单独的JSON文件。</p>
</li>
</ul>
<h4 id="17-1-1-1-简单值"><a href="#17-1-1-1-简单值" class="headerlink" title="17.1.1.1 简单值"></a>17.1.1.1 简单值</h4><p>123和”Hou” 这两个量就是JSON的表示方法，一个是JSON数值，一个是JSON字符串。布尔值和null也是有效 的形式。但实际运用中要结合对象或数组。</p>
<h4 id="17-1-1-2-对象"><a href="#17-1-1-2-对象" class="headerlink" title="17.1.1.2 对象"></a>17.1.1.2 对象</h4><p>JavaScript对象字面量表示法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = &#123;<br>   name: <span class="hljs-string">&#x27;Hou&#x27;</span>,<br>   age: <span class="hljs-number">100</span>    <br>&#125;; <br></code></pre></td></tr></table></figure>

<p>而JSON中的对象表示法需要加上双引号，并且不存在赋值运算和分号：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&#123;<br>   <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;Hou&quot;</span>, <span class="hljs-comment">//使用双引号，否则转换会出错</span><br>   <span class="hljs-string">&quot;age&quot;</span>: <span class="hljs-number">100</span>    <br>&#125; <br></code></pre></td></tr></table></figure>

<h4 id="17-1-1-3-数组"><a href="#17-1-1-3-数组" class="headerlink" title="17.1.1.3 数组"></a>17.1.1.3 数组</h4><p>JavaScript数组字面量表示法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = [<span class="hljs-number">100</span>, <span class="hljs-string">&#x27;Hou&#x27;</span>, <span class="hljs-literal">true</span>]; <br></code></pre></td></tr></table></figure>

<p>而JSON中的数组表示法同样没有变量赋值和分号：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">[<span class="hljs-number">100</span>, <span class="hljs-string">&quot;Hou&quot;</span>, <span class="hljs-literal">true</span>] <br></code></pre></td></tr></table></figure>

<p>一般比较常用的一种复杂形式是数组结合对象的形式：</p>
<figure class="highlight json"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br></pre></td><td class="code"><pre><code class="hljs json">[         <br>&#123;<br><span class="hljs-attr">&quot;title&quot;</span>: <span class="hljs-string">&quot;a&quot;</span>,<br><span class="hljs-attr">&quot;num&quot;</span>: <span class="hljs-number">1</span><br>&#125;,<br>&#123;<br><span class="hljs-attr">&quot;title&quot;</span>: <span class="hljs-string">&quot;b&quot;</span>,<br><span class="hljs-attr">&quot;num&quot;</span>: <span class="hljs-number">2</span><br>&#125;,<br>&#123;<br><span class="hljs-attr">&quot;title&quot;</span>: <span class="hljs-string">&quot;c&quot;</span>,<br><span class="hljs-attr">&quot;num&quot;</span>: <span class="hljs-number">3</span><br>&#125;    <br> ]<br></code></pre></td></tr></table></figure>

<p> <strong>PS</strong>：一般情况下，我们可以把JSON结构数据保存到一个文本文件里，然后通过XMLHttpRequest对象去加载它，得到这串结构数据字符串(XMLHttpRequest对象将在Aajx章节中详细探讨)。所以，我们可以模拟这种过程。</p>
<p>模拟加载JSON文本文件的数据，并且赋值给变量。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;[&#123;&quot;name&quot;: &quot;a&quot;,&quot;age&quot;: 1&#125;,&#123;&quot;name&quot;: &quot;b&quot;,&quot;age&quot;: 2&#125;]&#x27;</span>; <br></code></pre></td></tr></table></figure>

<p><strong>PS</strong>：上面这短代码模拟了**var box = load(‘demo.json’);**赋值过程。因为通过load加载的文本文件，不管内容是 什么，都必须是字符串。所以两边要加上双引号。</p>
<p>其实JSON就是比普通数组多了两边的双引号，普通数组如下：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = [&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">1</span>&#125;,&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">2</span>&#125;];<br></code></pre></td></tr></table></figure>

<h3 id="17-1-2-解析和序列化"><a href="#17-1-2-解析和序列化" class="headerlink" title="17.1.2 解析和序列化"></a>17.1.2 解析和序列化</h3><h4 id="JS中的JSON"><a href="#JS中的JSON" class="headerlink" title="JS中的JSON"></a>JS中的JSON</h4><p>解析JSON数据的目的是为了将数据渲染到前端（浏览器）。</p>
<p>渲染实例：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;body&gt;<br>    &lt;!-- 渲染数据到前端 --&gt;<br>    &lt;ul <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;stu-list&quot;</span>&gt;&lt;/ul&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-keyword">let</span> info = [<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00137&quot;</span>,<br>      sname: <span class="hljs-string">&quot;张三&quot;</span>,<br>      age: <span class="hljs-number">18</span>,<br>      tel: <span class="hljs-number">13597304384</span>,<br>      score: [<span class="hljs-number">78</span>,<span class="hljs-number">90</span>,<span class="hljs-number">93</span>]<br>    &#125;,<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00138&quot;</span>,<br>      sname: <span class="hljs-string">&quot;李四&quot;</span>,<br>      age: <span class="hljs-number">18</span>,<br>      tel: <span class="hljs-number">13597304333</span>,<br>      score: [<span class="hljs-number">72</span>,<span class="hljs-number">93</span>,<span class="hljs-number">63</span>]<br>    &#125;,<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00139&quot;</span>,<br>      sname: <span class="hljs-string">&quot;王五&quot;</span>,<br>      age: <span class="hljs-number">19</span>,<br>      tel: <span class="hljs-number">13697304333</span>,<br>      score: [<span class="hljs-number">62</span>,<span class="hljs-number">90</span>,<span class="hljs-number">93</span>]<br>    &#125;,<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00140&quot;</span>,<br>      sname: <span class="hljs-string">&quot;小绘&quot;</span>,<br>      age: <span class="hljs-number">17</span>,<br>      tel: <span class="hljs-number">13697350323</span>,<br>      score: [<span class="hljs-number">92</span>,<span class="hljs-number">98</span>,<span class="hljs-number">99</span>]<br>    &#125;<br>  ];<br>  <span class="hljs-keyword">var</span> txt = <span class="hljs-string">&#x27;&#x27;</span>;<br>  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> info)&#123;<br>    <span class="hljs-built_in">console</span>.log(info[i]);<br>    txt +=<span class="hljs-string">&#x27;&lt;li&gt;&#x27;</span>+<span class="hljs-string">&#x27;姓名：&#x27;</span>+info[i].sname+<span class="hljs-string">&#x27;&lt;br/&gt;&#x27;</span>+<span class="hljs-string">&#x27;电话：&#x27;</span>+info[i].tel+<span class="hljs-string">&#x27;&lt;/li&gt;&#x27;</span><br>  &#125;<br>  <span class="hljs-built_in">console</span>.log(txt);<br>  <span class="hljs-comment">// 动态渲染数据</span><br>  <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;stu-list&#x27;</span>)[<span class="hljs-number">0</span>].innerHTML = txt;<br><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>JS中，如果是JSON格式的字符串，不需要解析，可以直接访问。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;script&gt;<br>    <span class="hljs-keyword">let</span> info = [<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00137&quot;</span>,<br>      sname: <span class="hljs-string">&quot;张三&quot;</span>,<br>      age: <span class="hljs-number">18</span>,<br>      tel: <span class="hljs-number">13597304384</span>,<br>      score: [<span class="hljs-number">78</span>,<span class="hljs-number">90</span>,<span class="hljs-number">93</span>]<br>    &#125;,<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00138&quot;</span>,<br>      sname: <span class="hljs-string">&quot;李四&quot;</span>,<br>      age: <span class="hljs-number">18</span>,<br>      tel: <span class="hljs-number">13597304333</span>,<br>      score: [<span class="hljs-number">72</span>,<span class="hljs-number">93</span>,<span class="hljs-number">63</span>]<br>    &#125;,<br>    &#123;<br>      sno: <span class="hljs-string">&quot;00139&quot;</span>,<br>      sname: <span class="hljs-string">&quot;王五&quot;</span>,<br>      age: <span class="hljs-number">19</span>,<br>      tel: <span class="hljs-number">13697304333</span>,<br>      score: [<span class="hljs-number">62</span>,<span class="hljs-number">90</span>,<span class="hljs-number">93</span>]<br>    &#125;<br>  ];<br>  <span class="hljs-comment">// 解析JSON（直接访问JSON存储的变量即可）</span><br>  <span class="hljs-built_in">console</span>.log(info);<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>如果是载入的JSON文件，我们需要对其进行使用，那么就必须对JSON字符串解析成原生的JavaScript值。当然，如果是原生的JavaScript对象或数组，也可以转换成JSON字符串。 </p>
<p>对于讲JSON字符串解析为JavaScript原生值，早期采用的是eval()函数。但这种方法既不安全，可能会执行一些恶意代码。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;[&#123;&quot;name&quot;: &quot;a&quot;,&quot;age&quot;: 1&#125;,&#123;&quot;name&quot;: &quot;b&quot;,&quot;age&quot;: 2&#125;]&#x27;</span>;   <br>alert(box); <span class="hljs-comment">// JSON字符串</span><br><span class="hljs-keyword">var</span> json = <span class="hljs-built_in">eval</span>(box); <span class="hljs-comment">// 使用eval()函数解析</span><br>alert(json); <br></code></pre></td></tr></table></figure>

<p> ECMAScript5对解析JSON的行为进行规范，定义了全局对象JSON。支持这个对象的浏览器有IE8+、 Firefox3.5+、Safari4+、Chrome和Opera10.5+。不支持的浏览器也可以通过一个开源库json.js来模拟执行。 <strong>JSON对象提供了两个方法，一个是将原生JavaScript值转换为JSON字符串：stringify()；另一个是将JSON字符串转 换为JavaScript原生值：parse()。</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;script&gt;<br>    <span class="hljs-keyword">let</span> info = <span class="hljs-string">&#x27;[\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00137&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;张三&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 18,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13597304384,\</span><br><span class="hljs-string">      &quot;score&quot;: [78,90,93]\</span><br><span class="hljs-string">    &#125;,\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00138&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;李四&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 18,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13597304333,\</span><br><span class="hljs-string">      &quot;score&quot;: [72,93,63]\</span><br><span class="hljs-string">    &#125;,\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00139&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;王五&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 19,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13697304333,\</span><br><span class="hljs-string">      &quot;score&quot;: [62,90,93]\</span><br><span class="hljs-string">    &#125;\</span><br><span class="hljs-string">  ]&#x27;</span>;<br>  <span class="hljs-comment">//记得使用续航符连接数据成为字符串</span><br>  <span class="hljs-built_in">console</span>.log(info);<br>  <span class="hljs-comment">// 如果返回具有JSON格式的字符串，需要将它解析为JavaScript识别的JSON格式，用JSON.parse()方法实现。</span><br>  <span class="hljs-comment">//JSON格式的字符串规范：其中的键必须用双引号引起来，值如果是字符型数据，也必须用双引号引起来，</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.parse(info));<span class="hljs-comment">//将JSON格式字符串转换为JSON</span><br>    info = <span class="hljs-built_in">JSON</span>.parse(info);<br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">JSON</span>.stringify(info));<span class="hljs-comment">//将JSON转换为JSON格式字符串。</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p>在序列化JSON的过程中，stringify()方法还提供了第二个参数。第一个参数可以是一个数组（数组包含需要选中的值），也可以是一个函数，用于过滤结果。第二个参数则表示是否在JSON字符串中保留缩进。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = [&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">177</span>&#125;,&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">188</span>&#125;];    <br><span class="hljs-keyword">var</span> json = <span class="hljs-built_in">JSON</span>.stringify(box, [<span class="hljs-string">&#x27;name&#x27;</span>, <span class="hljs-string">&#x27;age&#x27;</span>], <span class="hljs-number">4</span>); <br><span class="hljs-comment">//[</span><br>    &#123;<br>        <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;a&quot;</span>,<br>        <span class="hljs-string">&quot;age&quot;</span>: <span class="hljs-number">1</span><br>    &#125;,<br>    &#123;<br>        <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;b&quot;</span>,<br>        <span class="hljs-string">&quot;age&quot;</span>: <span class="hljs-number">2</span><br>    &#125;<br>]<br><span class="hljs-keyword">var</span> json = <span class="hljs-built_in">JSON</span>.stringify(box, [<span class="hljs-string">&#x27;name&#x27;</span>, <span class="hljs-string">&#x27;age&#x27;</span>], <span class="hljs-number">4</span>); <br><span class="hljs-comment">//[</span><br>    &#123;<br>        <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;a&quot;</span><br>    &#125;,<br>    &#123;<br>        <span class="hljs-string">&quot;name&quot;</span>: <span class="hljs-string">&quot;b&quot;</span><br>    &#125;<br>]<br>alert(json); <br></code></pre></td></tr></table></figure>

<p>PS：如果不需要保留缩进，则不填即可；如果不需要过滤结果，但又要保留缩进，则讲过滤结果的参数设置为 null。如果采用函数，可以进行复杂的过滤。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = [&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">177</span>&#125;,&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;b&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">188</span>&#125;];    <br><span class="hljs-keyword">var</span> json = <span class="hljs-built_in">JSON</span>.stringify(box, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">key, value</span>) </span>&#123;<br>   <span class="hljs-keyword">switch</span> (key) &#123;<br><span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;name&#x27;</span>:<br><span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;Mr．&#x27;</span> + value;<br><span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;age&#x27;</span>:<br><span class="hljs-keyword">return</span> value + <span class="hljs-string">&#x27;岁&#x27;</span>;<br><span class="hljs-keyword">default</span>:<br><span class="hljs-keyword">return</span> value;<br>   &#125;    <br>&#125;, <span class="hljs-number">4</span>);    <br>alert(json);<br></code></pre></td></tr></table></figure>

<p>PS：保留缩进除了是普通的数字，也可以是字符。</p>
<p>还有一种方法可以自定义过滤一些数据，使用toJSON()方法，可以将某一组对象里指定返回某个值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = [&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;a&#x27;</span>, <span class="hljs-attr">age</span>: <span class="hljs-number">1</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">177</span>, <span class="hljs-attr">toJSON</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123; <br>   <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name;    <br>&#125;&#125;,&#123;<span class="hljs-attr">name</span>: <span class="hljs-string">&#x27;b&#x27;</span>,<span class="hljs-attr">age</span>: <span class="hljs-number">2</span>, <span class="hljs-attr">height</span>: <span class="hljs-number">188</span>, <span class="hljs-attr">toJSON</span>: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;<br>   <span class="hljs-keyword">return</span> <span class="hljs-built_in">this</span>.name;    <br>&#125;&#125;];    <br><span class="hljs-keyword">var</span> json = <span class="hljs-built_in">JSON</span>.stringify(box);    <br>alert(json);<br></code></pre></td></tr></table></figure>

<p><strong>PS</strong>：由此可见序列化也有执行顺序，首先先执行toJSON()方法；如果应用了第二个过滤参数，则执行这个方法；然后执行序列化过程，比如将键值对组成合法的JSON字符串，比如加上双引号。如果提供了缩进，再执行缩进操作。 </p>
<p>解析JSON字符串方法parse()也可以接受第二个参数，这样可以在还原出JavaScript值的时候替换成自己想要的值。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-keyword">var</span> box = <span class="hljs-string">&#x27;[&#123;&quot;name&quot;: &quot;a&quot;,&quot;age&quot;: 1&#125;,&#123;&quot;name&quot;: &quot;b&quot;,&quot;age&quot;: 2&#125;]&#x27;</span>;<br>   <span class="hljs-keyword">var</span> json = <span class="hljs-built_in">JSON</span>.parse(box, <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params">key, value</span>) </span>&#123;<br>   <span class="hljs-keyword">if</span> (key == <span class="hljs-string">&#x27;name&#x27;</span>) &#123;<br><span class="hljs-keyword">return</span> <span class="hljs-string">&#x27;Mr．&#x27;</span> + value;<br>   &#125; <span class="hljs-keyword">else</span> &#123;<br><span class="hljs-keyword">return</span> value;<br>   &#125;    <br>&#125;);    <br>alert(json[<span class="hljs-number">0</span>].name);<br></code></pre></td></tr></table></figure>

<p>转格式后的数据渲染</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;body&gt;<br>    &lt;!-- 渲染数据到前端 --&gt;<br>    &lt;ul <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;stu-list&quot;</span>&gt;&lt;/ul&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br> <span class="hljs-keyword">let</span> info = <span class="hljs-string">&#x27;[\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00137&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;张三&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 18,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13597304384,\</span><br><span class="hljs-string">      &quot;score&quot;: [78,90,93]\</span><br><span class="hljs-string">    &#125;,\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00138&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;李四&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 18,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13597304333,\</span><br><span class="hljs-string">      &quot;score&quot;: [72,93,63]\</span><br><span class="hljs-string">    &#125;,\</span><br><span class="hljs-string">    &#123;\</span><br><span class="hljs-string">      &quot;sno&quot;: &quot;00139&quot;,\</span><br><span class="hljs-string">      &quot;sname&quot;: &quot;王五&quot;,\</span><br><span class="hljs-string">      &quot;age&quot;: 19,\</span><br><span class="hljs-string">      &quot;tel&quot;: 13697304333,\</span><br><span class="hljs-string">      &quot;score&quot;: [62,90,93]\</span><br><span class="hljs-string">    &#125;\</span><br><span class="hljs-string">  ]&#x27;</span>;<br>  <span class="hljs-keyword">var</span> txt = <span class="hljs-string">&#x27;&#x27;</span>;<br>  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> <span class="hljs-built_in">JSON</span>.parse(info))&#123;<br>    <span class="hljs-built_in">console</span>.log( <span class="hljs-built_in">JSON</span>.parse(info));<br>    txt +=<span class="hljs-string">&#x27;&lt;li&gt;&#x27;</span>+<span class="hljs-string">&#x27;姓名：&#x27;</span>+ <span class="hljs-built_in">JSON</span>.parse(info)[i].sname+<span class="hljs-string">&#x27;&lt;br/&gt;&#x27;</span>+<span class="hljs-string">&#x27;电话：&#x27;</span>+ <span class="hljs-built_in">JSON</span>.parse(info)[i].tel+<span class="hljs-string">&#x27;&lt;/li&gt;&#x27;</span><br>  &#125;<br>  <span class="hljs-built_in">console</span>.log(txt);<br>  <span class="hljs-comment">// 动态渲染数据</span><br>  <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;stu-list&#x27;</span>)[<span class="hljs-number">0</span>].innerHTML = txt;<br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h4 id="解析JSON文件"><a href="#解析JSON文件" class="headerlink" title="解析JSON文件"></a>解析JSON文件</h4><p>JSON文件必须用<strong>Ajax</strong>(异步JavaScript和XML ，一种创建交互式网页应用的技术)技术去获取数据。</p>
<p>Ajax请求操作详细步骤（了解）：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;body&gt;<br>    &lt;ul <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;stu-list&quot;</span>&gt;&lt;/ul&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">//第一步：创建请求对象</span><br>    <span class="hljs-keyword">var</span> xhr = <span class="hljs-keyword">new</span> XMLHttpRequest();<br>    <span class="hljs-comment">//第二步：建立请求连接</span><br>    xhr.open(<span class="hljs-string">&#x27;get&#x27;</span>,<span class="hljs-string">&#x27;./students.json&#x27;</span>,<span class="hljs-literal">true</span>); <span class="hljs-comment">//get表示请求方式，url为请求路径，true表示异步操作（发送请求的同时可以进行其他操作）</span><br>    <span class="hljs-comment">//第四步：前端对请求结果进行处理。</span><br>    xhr.onreadystatechange = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123; <span class="hljs-comment">// JS中事件全部要加on</span><br>        <span class="hljs-keyword">if</span>(xhr.readyState == <span class="hljs-number">4</span>&amp;&amp; xhr.status == <span class="hljs-number">200</span>)&#123;<span class="hljs-comment">//4为发送请求成功，200为请求成功，如果两个都成功</span><br>            <span class="hljs-comment">// console.log(JSON.parse(xhr.responseText));//responseText：获取请求结果</span><br>            <span class="hljs-keyword">var</span> data = <span class="hljs-built_in">JSON</span>.parse(xhr.responseText),txt = <span class="hljs-string">&#x27;&#x27;</span>;<br>            <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> data)&#123;<br>                txt += <span class="hljs-string">&#x27;&lt;li&gt;&#x27;</span> + data[i].sname + <span class="hljs-string">&#x27;&lt;/li&gt;&#x27;</span>;<br>                <span class="hljs-built_in">console</span>.log(txt);<br>            &#125;<br>            <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;stu-list&#x27;</span>)[<span class="hljs-number">0</span>].innerHTML = txt;<br>        &#125;<br>    &#125;;<br>    xhr.send();<span class="hljs-comment">//第三步：向后台发送请求</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<p><strong>注意：如果发送Ajax请求，必须以http(服务器端)的方式启动文件，不能在本地直接打开</strong></p>
<h2 id="17-2-DOM介绍"><a href="#17-2-DOM介绍" class="headerlink" title="17.2 DOM介绍"></a>17.2 DOM介绍</h2><h3 id="17-2-1-DOM介绍"><a href="#17-2-1-DOM介绍" class="headerlink" title="17.2.1 DOM介绍"></a>17.2.1 DOM介绍</h3><p>HTML DOM 是W3C标准（是HTML<strong>文档对象模型</strong>的英文缩写，Document Object Modefor HTML）。HTML DOM定义了用于HTML和XML的一系列标准的对象，以及访问和处理 HTML文档的标准方法。 </p>
<p>通过DOM，可以访问所有的HTML元素，连同它们所包含的文本和属性。可以对其中的内容进行修改和删除，同时也可以创建新的元素。HTML DOM 独立于平台和编程语言。<strong>它可被任何编程语言诸如Java、JavaScript 和VBScript 使用。</strong> </p>
<h3 id="17-2-2-DOM树"><a href="#17-2-2-DOM树" class="headerlink" title="17.2.2 DOM树"></a>17.2.2 DOM树</h3><p>HTML DOM 定义了访问和操作HTML文档的标准方法。DOM 将 HTML和    XML文档表达为树结构。如图：</p>
<p><a href="https://imgtu.com/i/2nbTYT"><img src="https://z3.ax1x.com/2021/06/01/2nbTYT.png" srcset="/img/loading.gif" alt="2nbTYT.png"></a></p>
<h3 id="17-2-3-DOM节点"><a href="#17-2-3-DOM节点" class="headerlink" title="17.2.3 DOM节点"></a>17.2.3 DOM节点</h3><p>DOM是文档对象化模型（Document Object Model）的简称。使用过DHTML对象模型的开发者一定能非常熟练地操作HTML页面上的每个标记内容，但如果借助DOM技术， 我们就可以通过更加直接而且简易的方式达到同样的目的。</p>
<p>DOM技术被Internet Explorer5.0及以上版本的浏览器所支持，它采取一种非常直观且一致的方式将HTML文档进行模型化处理，并借此提供访问、导航和操作页面的简易编程接口。<strong>通过DOM技术，我们不仅能够访问和更新页面的内容及结构，而且还能操纵文档的风格样式。</strong>DOM由W3C 组织所倡导，这样，大多数浏览器都将最终支持这项技术。</p>
<p>DOM－Document Object Mode,它是W3C国际组织的一套Web标准，它定义了访问HTML文档对象的一套属性、方法和事件 。</p>
<h4 id="17-2-3-1-节点层次"><a href="#17-2-3-1-节点层次" class="headerlink" title="17.2.3.1 节点层次"></a>17.2.3.1 节点层次</h4><p><strong>父子节点，同胞节点</strong></p>
<p>节点树中的节点彼此拥有层级关系。父（parent）、子（child）和同胞（sibling）等术语用于描述这些关 系。父节点拥有子节点。同级的子节点被称为同胞（兄弟或姐妹）。</p>
<ul>
<li>在节点树中，顶端节点被称为根（root） </li>
<li>每个节点都有父节点、除了根（它没有父节点） </li>
<li>一个节点可拥有任意数量的子节点 </li>
<li>同胞是拥有相同父节点的节点</li>
</ul>
<h4 id="17-2-3-2-节点分类"><a href="#17-2-3-2-节点分类" class="headerlink" title="17.2.3.2 节点分类"></a>17.2.3.2 节点分类</h4><p>常见的节点类型有： </p>
<ul>
<li>元素节点：标签</li>
<li>属性节点：标签的属性</li>
<li>文本节点 ：标签中的换行符</li>
<li>文档节点：document</li>
</ul>
<p>这些节点他们都有自己的特点，每个节点的名称，节点的属性，节点对应的值都不相同。在我们平时的工作中，我们可以通过节点的值或名称来判断是什么节点。</p>
<h4 id="17-2-3-3-节点的名称"><a href="#17-2-3-3-节点的名称" class="headerlink" title="17.2.3.3 节点的名称"></a>17.2.3.3 节点的名称</h4><p>nodeName 是只读的也就是不能被重新赋值修改。</p>
<table>
<thead>
<tr>
<th>节点类型</th>
<th>nodeName</th>
</tr>
</thead>
<tbody><tr>
<td>元素节点</td>
<td>标签名相同</td>
</tr>
<tr>
<td>属性节点</td>
<td>属性名相同</td>
</tr>
<tr>
<td>文本节点</td>
<td>#text</td>
</tr>
<tr>
<td>文档节点</td>
<td>#document</td>
</tr>
</tbody></table>
<p>注意：nodeName 始终包含 HTM元素的大写字母标签名。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;测试&quot;</span>&gt;</span> 测试内容<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript"><span class="hljs-comment">/*获取节点名称*/</span></span><br><br><span class="javascript"><span class="hljs-comment">//标签节点      			   console.log(document.getElementById(&#x27;content&#x27;).nodeName); //输出DIV</span></span><br><br><span class="javascript"><span class="hljs-comment">//属性节点    console.log(document.getElementById(&#x27;content&#x27;).getAttributeNode(&#x27;title&#x27;).nodeName); // 输出titletitle = &quot;测试&quot;</span></span><br><br><span class="javascript"><span class="hljs-comment">//文本节点</span></span><br><span class="javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;content&#x27;</span>).childNodes[<span class="hljs-number">0</span>].nodeName); <span class="hljs-comment">// 输出#test</span></span><br><br><span class="javascript"><span class="hljs-comment">//文档节点</span></span><br><span class="javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.nodeName); <span class="hljs-comment">// 输出#document</span></span><br><br><span class="javascript"><span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>); <span class="hljs-comment">//访问整个文档</span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h4 id="17-2-3-4-节点的值"><a href="#17-2-3-4-节点的值" class="headerlink" title="17.2.3.4 节点的值"></a>17.2.3.4 节点的值</h4><p>nodeValue 属性规定节点的值。</p>
<table>
<thead>
<tr>
<th>节点类型</th>
<th>nodeValue</th>
</tr>
</thead>
<tbody><tr>
<td>元素节点</td>
<td>是undefined或null</td>
</tr>
<tr>
<td>文本节点</td>
<td>文本本身</td>
</tr>
<tr>
<td>属性节点</td>
<td>属性值</td>
</tr>
</tbody></table>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;DOM属性&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;<br>        &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;box&quot;</span>&gt;<br>            &lt;div id=<span class="hljs-string">&quot;content&quot;</span> title=<span class="hljs-string">&quot;测试&quot;</span>&gt; 测试内容&lt;/div&gt;<br>            &lt;p style=<span class="hljs-string">&quot;color:aqua;background-color: #8080ff;font-size: 30px;&quot;</span>&gt;天天睡懒觉y( •̀ ω •́ )y&lt;/p&gt;<br>        &lt;/div&gt;<br>    &lt;/div&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">/*获取节点值*/</span><br>    <span class="hljs-comment">//元素节点</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;content&#x27;</span>).nodeValue);    <span class="hljs-comment">//输出 null</span><br><br>    <span class="hljs-comment">//文本节点</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;content&#x27;</span>).childNodes[<span class="hljs-number">0</span>].nodeValue);    <span class="hljs-comment">//输出 测试内容</span><br><br>    <span class="hljs-comment">//属性节点</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;content&#x27;</span>).getAttributeNode(<span class="hljs-string">&#x27;title&#x27;</span>).nodeValue);    <span class="hljs-comment">//输出 测试</span><br><br>    <span class="hljs-comment">//文档节点</span><br>    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;p&#x27;</span>)[<span class="hljs-number">0</span>].getAttributeNode(<span class="hljs-string">&#x27;style&#x27;</span>).nodeValue);    <span class="hljs-comment">//输出 color:aqua;background-color: #8080ff;font-size: 30px;</span><br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<h4 id="17-2-3-5-节点的类型"><a href="#17-2-3-5-节点的类型" class="headerlink" title="17.2.3.5 节点的类型"></a>17.2.3.5 节点的类型</h4><p>nodeType 属性返回节点的类型。nodeType 是只读的，同样是不可以被修改，只可以访问。</p>
<table>
<thead>
<tr>
<th>元素类型</th>
<th>nodeType</th>
</tr>
</thead>
<tbody><tr>
<td>元素</td>
<td>1</td>
</tr>
<tr>
<td>属性</td>
<td>2</td>
</tr>
<tr>
<td>文本</td>
<td>3</td>
</tr>
<tr>
<td>注释</td>
<td>8</td>
</tr>
<tr>
<td>文档</td>
<td>9</td>
</tr>
</tbody></table>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>DOM属性<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;content&quot;</span> <span class="hljs-attr">title</span>=<span class="hljs-string">&quot;测试&quot;</span>&gt;</span> 测试内容<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">p</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;color:aqua;background-color: #8080ff;font-size: 30px;&quot;</span>&gt;</span>天天睡懒觉y( •̀ ω •́ )y<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">/*获取节点类型*/</span></span><br><span class="javascript">    <span class="hljs-comment">//元素1</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;content&#x27;</span>).nodeType);</span><br><span class="javascript">    <span class="hljs-comment">//属性2</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;p&#x27;</span>)[<span class="hljs-number">0</span>].getAttributeNode(<span class="hljs-string">&#x27;style&#x27;</span>).nodeType);</span><br><span class="javascript">    <span class="hljs-comment">//文本3</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;p&#x27;</span>)[<span class="hljs-number">0</span>].childNodes[<span class="hljs-number">0</span>].nodeType);</span><br><span class="javascript">    <span class="hljs-comment">//注释8</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log();</span><br><span class="javascript">    <span class="hljs-comment">//文档9</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.nodeType);</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="17-3-节点操作"><a href="#17-3-节点操作" class="headerlink" title="17.3 节点操作"></a>17.3 节点操作</h2><h3 id="17-3-1-获取节点"><a href="#17-3-1-获取节点" class="headerlink" title="17.3.1 获取节点"></a>17.3.1 获取节点</h3><p>我们获取节点的方法有很多，最基础常用的有：</p>
<ul>
<li>通过使用 getElementById() 方法</li>
<li>通过使用 getElementsByTagName() 方法</li>
<li>通过使用 getElementsByClassName() 方法</li>
</ul>
<p>注意： 我们获取节点<strong>最重要的返回的是一个节点还是一个节点数组</strong>。这个问题一定要搞清楚，不然会影响我们 的思考。这也是初学者常犯的错误。</p>
<p><strong>通过ID获取节点 【返回具体某个节点】</strong></p>
<p>getElementById</p>
<p><strong>通过标签名获取节点 【返回节点数组，即使只有一个】</strong>getElementsByTagName</p>
<p><strong>通过标签的name值获取节点 【返回节点数组】</strong></p>
<p>getElementsByName</p>
<p><strong>通过class值来获取节点 【返回节点数组】</strong></p>
<p>getElementsByClassName</p>
<p><strong>根据选择器返回找到结果集中的第一个</strong></p>
<p>querySelect(“选择器”)</p>
<p><strong>根据选择器返回找到的结果集，是个节点数组</strong></p>
<p>querySelectAll(“选择器”)</p>
<p><strong>注意：</strong></p>
<ul>
<li>我们的getElementsByClassName、querySelector这两个方法在Internet Explorer 5,6,7,8 中无效。</li>
<li>我们使用这些方法可以是某个具体的节点，如果是某个具体的节点那就是从这个节点往下寻找，如果不确定是从 哪往下找，我们一般使用根节点，文档节点调用方法。<ul>
<li>我们使用这些方法可以是某个具体的节点，如果是某个具体的节点那就是从这个节点往下寻找，如果不确定是 从哪往下找，我们一般使用根节点，文档节点调用方法。</li>
</ul>
</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 找到文档节点，然后在内部寻找id值为bb的节点</span><br><span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;bb&quot;</span>);<br></code></pre></td></tr></table></figure>

<ul>
<li>当然我们还可以使用节点关系来寻找到某些的节点</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">// 通过id值aa获取到节点赋给变量aa</span><br><span class="hljs-keyword">var</span> aa = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;aa&quot;</span>); <br><span class="hljs-comment">// 获取aa的父节点</span><br><span class="hljs-built_in">console</span>.log(aa.parentNode)<br></code></pre></td></tr></table></figure>

<ul>
<li>注意空白文本节点</li>
</ul>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span><br>   <span class="hljs-tag">&lt;<span class="hljs-name">button</span>&gt;</span>你好<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>   <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="javascript">   <span class="hljs-comment">// 因为ByTagName的方法获取到的是节点数组，我们如果页面里只有一个div，这个时候就是这个节点数组的第</span></span><br>一个元素<br><span class="javascript">   <span class="hljs-keyword">var</span> div = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;div&quot;</span>)[<span class="hljs-number">0</span>];</span><br><span class="javascript">   <span class="hljs-built_in">console</span>.log(div.childNodes) <span class="hljs-comment">//NodeList(3)</span></span><br>    /*<br>    0: text<br>	1: button<br>	2: text<br>	*/<br><span class="javascript">   <span class="hljs-built_in">console</span>.log(div.children) <span class="hljs-comment">//HTMLCollection(1)</span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>大家会发现输出的是一个数组，数组的个数为3个，为什么是三个？明明只有一个button节点，其实错了。还包含了两个空白的文本节点。但是下面那个却只输出了一个节点。为什么呢？ </p>
<p>childNodes返回的是节点的子节点集合，包括元素节点、文本节点还有属性节点。【小坑：在火狐浏览器里，childNodes相当于children,只获取元素节点】 </p>
<p>children返回的只是节点的元素节点集合，所以返回的只有button元素。</p>
<h3 id="17-3-2-创建和插入节点"><a href="#17-3-2-创建和插入节点" class="headerlink" title="17.3.2 创建和插入节点"></a>17.3.2 创建和插入节点</h3><p>如果想往DOM 添加新元素，我们必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。 </p>
<h4 id="17-3-2-1-创建节点"><a href="#17-3-2-1-创建节点" class="headerlink" title="17.3.2.1 创建节点"></a>17.3.2.1 创建节点</h4><p>语法：</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs javascript"><span class="hljs-comment">//创建一个元素节点</span><br><span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&quot;标签名&quot;</span>);<br><span class="hljs-comment">//创建一个文本节点</span><br><span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">&quot;文本内容&quot;</span>);<br></code></pre></td></tr></table></figure>

<p><strong>注意</strong>：如果我们使用for循环不断的创建，然后直接放入到页面里这是极高的损耗浏览器性能的，所以我们创 建代码片段（<strong>为避免频繁刷新DOM，可以先创造代码片段，完成所有节点操作之后统一添加到DOM中</strong>）</p>
<p><strong>创建实例：</strong></p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs javascript">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;Document&lt;/title&gt;<br>    &lt;style&gt;<br>        .wrapper &#123;<br>            color: cyan;<br>            font: 18px 宋体bold;<br>        &#125;<br>    &lt;/style&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    <br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">//创建元素节点</span><br>    <span class="hljs-keyword">var</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;p&#x27;</span>);<br>    <span class="hljs-built_in">console</span>.log(el);<br>    <br>    <span class="hljs-comment">//创建文本节点</span><br>    <span class="hljs-keyword">var</span> txt = <span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">&#x27;这个节点是动态创建的！&#x27;</span>);<br>    <span class="hljs-built_in">console</span>.log(txt);<br><br>    <span class="hljs-comment">//创建属性节点</span><br>    <span class="hljs-keyword">var</span> attr = <span class="hljs-built_in">document</span>.createAttribute(<span class="hljs-string">&#x27;class&#x27;</span>); <span class="hljs-comment">//添加属性名</span><br>    attr.value = <span class="hljs-string">&#x27;wrapper&#x27;</span>;<span class="hljs-comment">//为属性设置值</span><br>    <span class="hljs-built_in">console</span>.log(attr);<br><br>    <span class="hljs-comment">//整合/关联以上三个节点</span><br>    el.appendChild(txt); <span class="hljs-comment">//为元素节点添加text文本节点</span><br>    <span class="hljs-built_in">console</span>.log(el);<br>    el.setAttributeNode(attr); <span class="hljs-comment">//为元素节点添加属性</span><br>    <span class="hljs-built_in">document</span>.body.appendChild(el);<br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<p>简介创建方法：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><code class="hljs js"><span class="hljs-comment">//效果与上面相同</span><br><span class="hljs-keyword">var</span> el = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;p&#x27;</span>); <span class="hljs-comment">//创建一个元素节点</span><br>el.createAttribute(<span class="hljs-string">&#x27;class&#x27;</span>,<span class="hljs-string">&#x27;wrapper box&#x27;</span>); <span class="hljs-comment">//为元素节点添加属性和属性值</span><br>el.innerHTML = <span class="hljs-string">&#x27;这是一种简介创建方式！&#x27;</span>;<span class="hljs-comment">//为元素节点设置问本内容</span><br><span class="hljs-built_in">document</span>.body.appendChild(el); <span class="hljs-comment">//将创建的节点添加到文档中</span><br></code></pre></td></tr></table></figure>

<p>批量创建还可以封装函数实现</p>
<h4 id="17-3-2-2-插入节点"><a href="#17-3-2-2-插入节点" class="headerlink" title="17.3.2.2 插入节点"></a>17.3.2.2 插入节点</h4><p>插入节点有两种办法，第一种思路是插入到某个节点的内部的尾部我们称为appendChild，这个时候我们只需 要知道是哪个父节点需要放子节点就可以了；第二种思路是插入到某个节点的的内部的某个节点的前面，这个时候我 们就需要知道父节点是什么，同时我们还需要知道子节点是哪个，才好放在谁前面。</p>
<h5 id="１-插入内部的尾部"><a href="#１-插入内部的尾部" class="headerlink" title="１.插入内部的尾部"></a>１.插入内部的尾部</h5><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs js">父节点.appendChild(创建的节点)<br></code></pre></td></tr></table></figure>

<h5 id="２-插入内部的某个前面"><a href="#２-插入内部的某个前面" class="headerlink" title="２.插入内部的某个前面"></a>２.插入内部的某个前面</h5><figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">父节点.insertBefore(创建的节点,已知的子节点)<br></code></pre></td></tr></table></figure>

<p>上面这个代码比较有意思，我们实现了将新创建的节点放到需要放的节点里面的第一个的位置。</p>
<p><strong>实例：</strong></p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;body&gt;<br>    &lt;ul <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;list&quot;</span>&gt;<br>        &lt;li&gt;&lt;/li&gt;<br>        &lt;li&gt;&lt;/li&gt;<br>        &lt;li&gt;&lt;/li&gt;<br>        &lt;li&gt;&lt;/li&gt;<br>    &lt;/ul&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">//插入到最后</span><br>    <span class="hljs-keyword">var</span> li = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;li&#x27;</span>);<br>    <span class="hljs-keyword">var</span> txt = <span class="hljs-built_in">document</span>.createTextNode(<span class="hljs-string">&#x27;插入节点章节&#x27;</span>);<br>    li.appendChild(txt);<br>    <span class="hljs-keyword">var</span> list = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;list&#x27;</span>)[<span class="hljs-number">0</span>]; <br>    list.appendChild(li);<br><br>    <br>    <span class="hljs-comment">// 插入到指定元素前面</span><br>    <span class="hljs-comment">// 或var oLi = document.getElementsByTagName(&#x27;li&#x27;)[2];</span><br>    <span class="hljs-keyword">let</span> ul = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;list&#x27;</span>)[<span class="hljs-number">0</span>];<br>    <span class="hljs-built_in">console</span>.log(ul);<br>    <span class="hljs-keyword">let</span> oLi = ul.getElementsByTagName(<span class="hljs-string">&#x27;li&#x27;</span>)[<span class="hljs-number">2</span>];<br>    ul.insertBefore(li,oLi);<br>    <span class="hljs-comment">//注意：会有覆盖效果</span><br>&lt;/script&gt;<br></code></pre></td></tr></table></figure>

<h3 id="17-3-3-替换节点"><a href="#17-3-3-替换节点" class="headerlink" title="17.3.3 替换节点"></a>17.3.3 替换节点</h3><p>替换节点是我们将某个子节点替换成我们自己想要的节点。</p>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs javascript">父节点.replaceChild(新节点，老节点)<br></code></pre></td></tr></table></figure>

<p>实例：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;replaceChild&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    &lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;box&quot;</span>&gt;&lt;/div&gt;<br>    &lt;strong&gt;Strong&lt;/strong&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">//需求：替换掉Strong标签改为p标签</span><br>    <span class="hljs-comment">// 创建节点</span><br>    <span class="hljs-keyword">let</span>  newP = <span class="hljs-built_in">document</span>.createElement(<span class="hljs-string">&#x27;p&#x27;</span>);<br>    newP.setAttribute(<span class="hljs-string">&#x27;style&#x27;</span>,<span class="hljs-string">&#x27;color:#8080ff;border:1px solid #ff00ff;&#x27;</span>);<br>    newP.setAttribute(<span class="hljs-string">&#x27;title&#x27;</span>,<span class="hljs-string">&#x27;节点修改&#x27;</span>);<br>    <span class="hljs-built_in">console</span>.log(newP);<br>    newP.innerHTML = <span class="hljs-string">&#x27;这是一个替换标签的测试&#x27;</span>;<br><br>    <span class="hljs-comment">//替换节点</span><br>    <span class="hljs-keyword">var</span> body = <span class="hljs-built_in">document</span>.body; <span class="hljs-comment">// 对节点的获取，最好缓存到内存变量中。</span><br>    <span class="hljs-keyword">var</span> strong = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;strong&#x27;</span>)[<span class="hljs-number">0</span>];<span class="hljs-comment">//找到老节点</span><br>    body.replaceChild(newP,strong); <span class="hljs-comment">//父节点.replaceChild(新节点，老节点)</span><br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<h3 id="17-3-4-克隆节点"><a href="#17-3-4-克隆节点" class="headerlink" title="17.3.4 克隆节点"></a>17.3.4 克隆节点</h3><p>克隆节点就是将我们需要的节点复制一份，我们的克隆节点有深度克隆和浅克隆。</p>
<ul>
<li>深度克隆： 包含子节点一起克隆。</li>
<li>浅克隆： 只会将找到的这个节点克隆，子节点不会克隆</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><code class="hljs js">需要被复制的节点. cloneNode(<span class="hljs-literal">true</span>/<span class="hljs-literal">false</span>);<br> <span class="hljs-literal">true</span>: 复制当前节点以及所有子节点<br> <span class="hljs-literal">false</span>: 仅复制当前节点<br></code></pre></td></tr></table></figure>

<p>实例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>clone节点<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>strong<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;box&#x27;</span>)[<span class="hljs-number">0</span>];</span><br><span class="javascript">    <span class="hljs-comment">//深度克隆</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> deepClone_test = box.cloneNode(<span class="hljs-literal">true</span>);</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.body.appendChild(deepClone_test);</span><br><br><span class="javascript">    <span class="hljs-comment">// 浅度克隆</span></span><br><span class="javascript">    shallowClone_test = box.cloneNode(<span class="hljs-literal">false</span>);</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.body.appendChild(shallowClone_test);</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="17-3-5-删除节点"><a href="#17-3-5-删除节点" class="headerlink" title="17.3.5 删除节点"></a>17.3.5 删除节点</h3><h4 id="方法一"><a href="#方法一" class="headerlink" title="方法一"></a>方法一</h4><p>删除当前节点及其子节点。</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs text">节点.remove();<br></code></pre></td></tr></table></figure>

<h4 id="方法二"><a href="#方法二" class="headerlink" title="方法二"></a>方法二</h4><p>删除节点就是从我们的页面中删除这个节点。我们需要去找到需要删除的节点的父节点，然后在去使用 removeChild方法删除对应的节点。</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs text">删除节点就是从我们的页面中删除这个节点。我们需要去找到需要删除的节点的父节点，然后在去使用<br>removeChild方法删除对应的节点。<br></code></pre></td></tr></table></figure>

<p>实例：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>删除节点<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>strong<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;box&#x27;</span>)[<span class="hljs-number">0</span>];</span><br><span class="javascript">    <span class="hljs-comment">//删除当前节点及其子节点</span></span><br><span class="javascript">    <span class="hljs-comment">// box.remove();</span></span><br>    <br><span class="javascript">    <span class="hljs-comment">//通过父节点删除</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> span = box.getElementsByTagName(<span class="hljs-string">&#x27;span&#x27;</span>)[<span class="hljs-number">0</span>];</span><br>    box.removeChild(span);<br><br><span class="javascript">    <span class="hljs-comment">//需求：删除ul中的所有li标签</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> ul = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;ul&#x27;</span>)[<span class="hljs-number">0</span>];</span><br><span class="javascript">    <span class="hljs-keyword">var</span> lis = ul.getElementsByTagName(<span class="hljs-string">&#x27;li&#x27;</span>);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(lis.length);</span><br><span class="javascript">    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;lis.length;i++)&#123;</span><br>        ul.removeChild(lis[i]);<br><span class="javascript">        --i;<span class="hljs-comment">//因为remove是从前往后删除，删除后，第二个元素会到第一个元素的位置去，但是i已经增大了</span></span><br><span class="javascript">        <span class="hljs-comment">//其实用while更好一点</span></span><br>    &#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>注意：调用删除方法的节点必须是要被删除节点的父节点。</strong></p>
<h2 id="17-4-节点属性操作"><a href="#17-4-节点属性操作" class="headerlink" title="17.4 节点属性操作"></a>17.4 节点属性操作</h2><p>我们每个节点都是有很多属性的，有一些属性是某些节点所特有的，有些时所有节点都有的属性。如 id,class,title等等。还有一些我们称之为自定义属性是以data-开头的属性。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">data-str</span>=<span class="hljs-string">&quot;前端开发&quot;</span>&gt;</span>教育<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>这个data-str就是我们的自定义属性，注意我们的<strong>自定义属性必须要以data-开头！</strong></p>
<h3 id="17-4-1-获取属性"><a href="#17-4-1-获取属性" class="headerlink" title="17.4.1 获取属性"></a>17.4.1 获取属性</h3><p> 由于我们的节点也是对象，所以我们的节点的属性我们可以通过前面我们对象的访问属性的方法用点去访问,同时我们DOM节点对象还单独提供了getAttribute()方法获取属性。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js">节点.属性名   <span class="hljs-comment">// 用点号获取   【方法一】</span><br>节点.getAttribute(<span class="hljs-string">&quot;属性名&quot;</span>) <span class="hljs-comment">// 用getAttribute获取 【方法二】</span><br></code></pre></td></tr></table></figure>

<blockquote>
<p>区别：</p>
<ul>
<li>方法一只能获取已经包含的属性，<strong>不能获取自定义属性</strong></li>
<li>方法二是所有的属性都可以获取，<strong>包括用户自定义属性</strong></li>
</ul>
</blockquote>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br> <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">data-str</span>=<span class="hljs-string">&quot;前端开发&quot;</span>&gt;</span>教育<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt;</span><br><span class="javascript">   <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;box&quot;</span>);</span><br><span class="javascript">   <span class="hljs-built_in">console</span>.log(box.id); <span class="hljs-comment">// 输出 &quot;box&quot;</span></span><br><span class="javascript">   <span class="hljs-built_in">console</span>.log(box.getAttribute(<span class="hljs-string">&quot;data-str&quot;</span>)); <span class="hljs-comment">// 输出 &quot;前端开发&quot;</span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h3 id="17-4-2-设置属性"><a href="#17-4-2-设置属性" class="headerlink" title="17.4.2 设置属性"></a>17.4.2 设置属性</h3><p>设置属性的方法很简单，也有两种方法和上面基本对应。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js">节点.属性名 = 属性值; <span class="hljs-comment">//【方法一】,不能设置用户自定义属性</span><br>节点.setAttribute(<span class="hljs-string">&quot;属性名&quot;</span>,属性值); <span class="hljs-comment">//【方法二】</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;body&gt; <br> &lt;img src=<span class="hljs-string">&quot;&quot;</span>/&gt; <br>&lt;/body&gt; <br>&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt; <br> <span class="hljs-keyword">var</span> img = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;img&quot;</span>)[<span class="hljs-number">0</span>]; <br> img.src = <span class="hljs-string">&quot;img/aaa.png&quot;</span>; <span class="hljs-comment">// 设置图片路径</span><br> img.setAttribute(<span class="hljs-string">&quot;alt&quot;</span>,<span class="hljs-string">&quot;很帅！&quot;</span>) <br> img.setAttribute(<span class="hljs-string">&quot;data-aaa&quot;</span>,<span class="hljs-string">&quot;我很好&quot;</span>) <br>&lt;/script&gt; <br></code></pre></td></tr></table></figure>

<h3 id="17-4-3-删除属性"><a href="#17-4-3-删除属性" class="headerlink" title="17.4.3 删除属性"></a>17.4.3 删除属性</h3><p>删除属性有两种方法，第一种是将这个属性名对应的属性值置位空；第二种是将节点上对应的这个属性给删除 了。 第一种方法并不是真正的删除。</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs js">节点.属性名 = <span class="hljs-string">&quot;&quot;</span>; <span class="hljs-comment">//不能删除用户自定义属性</span><br>节点.removeAttribute(<span class="hljs-string">&quot;属性名&quot;</span>); <span class="hljs-comment">// 将节点上这个属性删除</span><br></code></pre></td></tr></table></figure>

<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;body&gt; <br> &lt;img src=<span class="hljs-string">&quot;img/aaa.png&quot;</span>/ alt=<span class="hljs-string">&quot;很帅&quot;</span> data-aaa=<span class="hljs-string">&quot;我很好&quot;</span>&gt; <br>&lt;/body&gt; <br>&lt;script type=<span class="hljs-string">&quot;text/javascript&quot;</span>&gt; <br> <span class="hljs-keyword">var</span> img = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;img&quot;</span>)[<span class="hljs-number">0</span>]; <br> img.src = <span class="hljs-string">&quot;&quot;</span>; <span class="hljs-comment">// 设置图片路径</span><br> img.removeAttribute(<span class="hljs-string">&quot;data-aaa&quot;</span>); <br>&lt;/script&gt; <br></code></pre></td></tr></table></figure>

<h3 id="17-4-4-实例"><a href="#17-4-4-实例" class="headerlink" title="17.4.4 实例"></a>17.4.4 实例</h3><p><strong>切换图片：轮播图原理</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>切换图片<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/insert1.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;蝴蝶&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:200px;display: block;&quot;</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;../imgs/payment.jpg&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;蝴蝶&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:200px;display: block;&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">//获取图片属性</span></span><br><span class="javascript">    <span class="hljs-comment">//方法一：不能获取用户自定义属性</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>]);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].alt);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].src);</span><br><span class="javascript">    <span class="hljs-comment">//方法二：可以获取用户自定义属性</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;src&#x27;</span>));</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;alt&#x27;</span>));</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;data-src&#x27;</span>));</span><br><br><span class="javascript">    <span class="hljs-comment">//设置属性</span></span><br><span class="javascript">    <span class="hljs-keyword">var</span> img = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>);</span><br><span class="javascript">    img[<span class="hljs-number">1</span>].src = <span class="hljs-string">&quot;../imgs/test.png&quot;</span>;</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;btn&#x27;</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>&#123;</span><br><span class="javascript">        <span class="hljs-comment">//鼠标点击后调用函数。</span></span><br><span class="javascript">        <span class="hljs-keyword">var</span> url = img[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;data-src&#x27;</span>);</span><br><span class="javascript">        img[<span class="hljs-number">0</span>].setAttribute(<span class="hljs-string">&#x27;src&#x27;</span>,url) ;</span><br>    &#125;<br><br><span class="javascript">    <span class="hljs-comment">//删除属性</span></span><br><span class="javascript">    img[<span class="hljs-number">1</span>].src = <span class="hljs-string">&#x27;&#x27;</span>;</span><br><span class="javascript">    img[<span class="hljs-number">1</span>].removeAttribute(<span class="hljs-string">&#x27;alt&#x27;</span>);</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<h2 id="17-5-节点文本操作"><a href="#17-5-节点文本操作" class="headerlink" title="17.5 节点文本操作"></a>17.5 节点文本操作</h2><h3 id="17-5-1-获取文本"><a href="#17-5-1-获取文本" class="headerlink" title="17.5.1 获取文本"></a>17.5.1 获取文本</h3><p>获取节点文本主要通过访问节点的属性来获得，分别有以下三个属性：innerHTM、innerText、value。</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs text">节点.innerHTM //获取节点下的所有内容包含了标签，用于获取双标签文本内容，单标签是不行的。<br>节点.innerText // 获取节点下的文本内容，会过滤掉标签<br>节点.value // 获取input输入框等表单控件的内容<br>节点.getAttribute(“value”) //value是表单输入框的属性，可以使用getAttribute获得value值<br></code></pre></td></tr></table></figure>

<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>切换图片<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>请点击<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/insert1.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;蝴蝶&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:200px;display: block;&quot;</span> <span class="hljs-attr">data-src</span>=<span class="hljs-string">&quot;../imgs/payment.jpg&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;蝴蝶&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:200px;display: block;&quot;</span>&gt;</span><br>   <br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;表单文本框内容&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;txt&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">//获取文本</span></span><br><span class="javascript">    <span class="hljs-comment">//.innerHTML</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn&quot;</span>).innerHTML);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;img&#x27;</span>)[<span class="hljs-number">0</span>].innerHTML);<span class="hljs-comment">//单标签不能这种方式获取文本内容，因为单标签没有文本内容。</span></span><br><br><br><span class="javascript">    <span class="hljs-comment">//.innerText</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn&quot;</span>).innerText);<span class="hljs-comment">//过滤了标签，只保留文本内容</span></span><br>    <br><span class="javascript">    <span class="hljs-comment">//.value</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;input&quot;</span>)[<span class="hljs-number">0</span>].value);<span class="hljs-comment">//相当于获取属性</span></span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].txt.value);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;input&#x27;</span>).value);</span><br><span class="javascript">    <span class="hljs-comment">// 用途：当用户注册时某个框失去焦点，开始验证信息是否满足要求</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].txt.onblur = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<span class="hljs-comment">//onblur事件：失去焦点时触发该事件。</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">this</span>.getAttribute(<span class="hljs-string">&#x27;value&#x27;</span>));<span class="hljs-comment">// this代表当前操作对象document.forms[0].txt</span></span><br><span class="javascript">        <span class="hljs-keyword">if</span>(<span class="hljs-built_in">this</span>.value == <span class="hljs-string">&#x27;aaa&#x27;</span>)&#123;</span><br><span class="javascript">            alert(<span class="hljs-string">&quot;登录成功&quot;</span>);</span><br><span class="javascript">            location.href = <span class="hljs-string">&#x27;http://miketaylorjuly123.cn&#x27;</span>;<span class="hljs-comment">//location.href可以用于动态跳转。</span></span><br><span class="javascript">        &#125;<span class="hljs-keyword">else</span>&#123;</span><br><span class="javascript">            alert(<span class="hljs-string">&quot;登录失败&quot;</span>);</span><br>        &#125;<br>    &#125;;<br><span class="javascript">   <span class="hljs-built_in">console</span>.log(<span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&quot;input&quot;</span>)[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;type&#x27;</span>));<span class="hljs-comment">//只能获取标签属性值，不能获取标签文本内容</span></span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p><strong>可用功能：当用户注册时某个框失去焦点，立即验证信息是否满足要求。</strong></p>
<h3 id="17-5-2-设置文本"><a href="#17-5-2-设置文本" class="headerlink" title="17.5.2 设置文本"></a>17.5.2 设置文本</h3><p>设置文本的使用方法和获取文本方法差不多，直接对属性进行赋值。</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs text">节点.innerHTM= &quot;文本内容&quot; // 会翻译html标签<br>节点.innerText = &quot;文本内容&quot; // 不会翻译html标签<br>节点.value = 值 <br>节点.setAttribute(&quot;value&quot;,值) // 因为value是属性，所以也可以中这个方法设置内容 <br></code></pre></td></tr></table></figure>

<p><strong>注意：如果节点原本有内容，赋入内容后就会把原来的覆盖了。</strong></p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>Document<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn&quot;</span>&gt;</span>切换图片<span class="hljs-tag">&lt;<span class="hljs-name">span</span>&gt;</span>请点击<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">form</span> <span class="hljs-attr">action</span>=<span class="hljs-string">&quot;&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;text&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;表单文本框内容&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;txt&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;1&quot;</span>&gt;</span>男<br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;radio&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;sex&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;0&quot;</span>&gt;</span>女<br>        <span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;敲代码&quot;</span>&gt;</span>敲代码<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;看美剧&quot;</span>&gt;</span>看美剧<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;GTA5&quot;</span>&gt;</span>GTA5<br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;checkbox&quot;</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;hobby&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;其他&quot;</span>&gt;</span>其他<span class="hljs-tag">&lt;<span class="hljs-name">br</span>/&gt;</span><br><br>        <span class="hljs-tag">&lt;<span class="hljs-name">input</span> <span class="hljs-attr">type</span>=<span class="hljs-string">&quot;button&quot;</span> <span class="hljs-attr">value</span>=<span class="hljs-string">&quot;提交&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;ok&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">form</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-comment">//设置文本</span></span><br><span class="javascript">    <span class="hljs-comment">//.innerHTML,会自动解析标签</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn&quot;</span>).innerHTML = <span class="hljs-string">&#x27;aaa&#x27;</span>;</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn&quot;</span>).innerHTML = <span class="hljs-string">&#x27;&lt;strong&gt;命令按钮&lt;/strong&gt;&#x27;</span>;</span><br><br><span class="javascript">    <span class="hljs-comment">//.innerText，不会翻译html内容</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn&quot;</span>).innerText =  <span class="hljs-string">&#x27;&lt;strong&gt;命令按钮&lt;/strong&gt;&#x27;</span>;</span><br><span class="javascript">    <span class="hljs-comment">//.value</span></span><br><span class="javascript">    <span class="hljs-comment">//设置某个单选按钮被选中</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].sex.value = <span class="hljs-number">0</span>;</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].sex.value = <span class="hljs-number">1</span>;</span><br>    <br><span class="javascript">    <span class="hljs-comment">//设置某个复选框选项被选中,使用checked属性实现</span></span><br><span class="javascript">    <span class="hljs-comment">// document.forms[0].hobby = &#x27;b&#x27;;//不能通过value设置复选框的某项被选中。</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].hobby[<span class="hljs-number">1</span>].checked = <span class="hljs-literal">true</span>;</span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].hobby[<span class="hljs-number">2</span>].checked = <span class="hljs-literal">true</span>;</span><br>    <br><span class="javascript">    <span class="hljs-comment">//单机提交按钮，获取所有复选框被选中的值。</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;#ok&#x27;</span>).onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">        <span class="hljs-keyword">var</span> chks = <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].hobby; <span class="hljs-comment">//获取所有的复选框DOM</span></span><br><span class="javascript">        <span class="hljs-built_in">console</span>.dir(chks);</span><br><span class="javascript">        <span class="hljs-keyword">var</span> arr = [];</span><br><span class="javascript">        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> chks)&#123;</span><br><span class="javascript">            <span class="hljs-keyword">if</span>(chks[i].checked)&#123;<span class="hljs-comment">//如果被选中</span></span><br>                arr.push(chks[i].value);<br>            &#125;<br>        &#125;<br><span class="javascript">        <span class="hljs-built_in">console</span>.log(arr);</span><br>    &#125;;<br><br><span class="javascript">    <span class="hljs-comment">//.setAttribute(&quot;value&quot;,值)</span></span><br><span class="javascript">     <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].hobby[<span class="hljs-number">3</span>].setAttribute(<span class="hljs-string">&quot;checked&quot;</span>,<span class="hljs-literal">true</span>);<span class="hljs-comment">//后面带任何值都是被选中包括false。</span></span><br><span class="javascript">    <span class="hljs-comment">//  document.forms[0].hobby[3].setAttribute(&quot;checked&quot;,false);//不起作用，要使用下面的方法</span></span><br><span class="javascript">    <span class="hljs-comment">//方法一：</span></span><br><span class="javascript">    <span class="hljs-comment">// document.forms[0].hobby[3].removeAttribute(&quot;checked&quot;);</span></span><br><span class="javascript">    <span class="hljs-comment">//方法二：</span></span><br><span class="javascript">    <span class="hljs-comment">// document.forms[0].hobby[3].checked = &#x27;&#x27;;</span></span><br><span class="javascript">    <span class="hljs-comment">//方法三：</span></span><br><span class="javascript">    <span class="hljs-built_in">document</span>.forms[<span class="hljs-number">0</span>].hobby[<span class="hljs-number">3</span>].checked = <span class="hljs-literal">false</span>;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<ul>
<li>可用功能：<ul>
<li>设置某个单选框/复选框的值被选中。</li>
<li>使用提交按钮，提交选择框的信息。</li>
<li>设置某个单选框/复选框的值未被选中。</li>
</ul>
</li>
</ul>
<h3 id="17-5-3-删除文本"><a href="#17-5-3-删除文本" class="headerlink" title="17.5.3 删除文本"></a>17.5.3 删除文本</h3><p>删除文本内容可通过设置属性为空或者移除value属性来实现。</p>
<figure class="highlight text"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs text">节点.innerHTM= &quot;&quot; <br>节点.innerText = &quot;&quot; <br>节点.value = &quot;&quot; <br>节点.removeAttribute(&quot;value&quot;) //它是直接删除属性。<br></code></pre></td></tr></table></figure>

<h2 id="17-6-DOM节点样式操作"><a href="#17-6-DOM节点样式操作" class="headerlink" title="17.6 DOM节点样式操作"></a>17.6 DOM节点样式操作</h2><h3 id="17-6-1-操作样式class"><a href="#17-6-1-操作样式class" class="headerlink" title="17.6.1 操作样式class"></a>17.6.1 操作样式class</h3><p> 可以通过操作节点class属性来获取或者设置节点的样式。</p>
<h4 id="获取"><a href="#获取" class="headerlink" title="获取"></a>获取</h4><figure class="highlight reasonml"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs reasonml">节点.className 获取节点的所有<span class="hljs-keyword">class</span><br>节点.get<span class="hljs-constructor">Attribute(<span class="hljs-string">&quot;class&quot;</span>)</span> 获取节点的所有<span class="hljs-keyword">class</span><br></code></pre></td></tr></table></figure>

<h4 id="设置-注意设置会将原来的值覆盖"><a href="#设置-注意设置会将原来的值覆盖" class="headerlink" title="设置 [注意设置会将原来的值覆盖]"></a>设置 [注意设置会将原来的值覆盖]</h4><figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs stylus">节点<span class="hljs-selector-class">.className</span> = 值<br>节点<span class="hljs-selector-class">.setAttribute</span>(<span class="hljs-string">&quot;class&quot;</span>,值)<br></code></pre></td></tr></table></figure>

<h4 id="HTML5为元素提供了一个新的属性：classList-来实现对元素样式表的增删改查。"><a href="#HTML5为元素提供了一个新的属性：classList-来实现对元素样式表的增删改查。" class="headerlink" title="HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查。"></a>HTML5为元素提供了一个新的属性：classList 来实现对元素样式表的增删改查。</h4><figure class="highlight jboss-cli"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br></pre></td><td class="code"><pre><code class="hljs jboss-cli">节点<span class="hljs-string">.classList.add</span><span class="hljs-params">(value)</span>; <span class="hljs-string">//</span>为元素添加指定的类 <br>节点<span class="hljs-string">.classList.contains</span><span class="hljs-params">(value)</span>; <span class="hljs-string">//</span> 判断元素是否含有指定的类，如果存在返回<span class="hljs-literal">true</span> <br>节点<span class="hljs-string">.classList.remove</span><span class="hljs-params">(value)</span>; <span class="hljs-string">//</span> 删除指定的类 <br>节点<span class="hljs-string">.classList.toggle</span><span class="hljs-params">(value)</span>; <span class="hljs-string">//</span> 有就删除，没有就添加指定类<br></code></pre></td></tr></table></figure>

<h4 id="17-6-1-2-实例"><a href="#17-6-1-2-实例" class="headerlink" title="17.6.1.2 实例"></a>17.6.1.2 实例</h4><figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;操作<span class="hljs-class"><span class="hljs-keyword">class</span>&lt;/<span class="hljs-title">title</span>&gt;</span><br><span class="hljs-class">    &lt;<span class="hljs-title">style</span>&gt;</span><br><span class="hljs-class">        .<span class="hljs-title">p</span>-<span class="hljs-title">style</span></span>&#123;<br>            color:#8080ff;<br>            font-size: 30px;<br>            font-weight: bold;<br>        &#125;<br>        .demo&#123;<br>            background-color: cyan;<br>            color: #e71590;<br>            height: 200px;<br>            line-height: 200px;<br>            text-align: center;<br>        &#125;<br>    &lt;/style&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    &lt;p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;test p-style&quot;</span>&gt;这是一段测试文本&lt;/p&gt;<br>    &lt;p <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">&quot;test&quot;</span>&gt;这是一段测试文本&lt;/p&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-comment">//获取节点所有class</span><br>    <span class="hljs-comment">//.className</span><br>    <span class="hljs-keyword">let</span> cont = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;test&#x27;</span>); <span class="hljs-built_in">console</span>.log(cont);<br>    <span class="hljs-built_in">console</span>.log(cont[<span class="hljs-number">0</span>].className);<br>    <span class="hljs-comment">//.getAttritube(&quot;class&quot;)</span><br>    <span class="hljs-built_in">console</span>.log(cont[<span class="hljs-number">0</span>].getAttribute(<span class="hljs-string">&#x27;class&#x27;</span>));<br><br>    <span class="hljs-comment">// 设置节点class属性</span><br>    cont[<span class="hljs-number">1</span>].className = <span class="hljs-string">&#x27;p-style&#x27;</span>;<br>    <span class="hljs-built_in">console</span>.log(cont);<span class="hljs-comment">//可以看到，数组cont变少了一个元素，说明赋值后，不含test class属性的被从数组中删除了。</span><br>    <span class="hljs-comment">// cont[1].className = &#x27;test&#x27;; //报错，原因如上述。</span><br>     <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;p-style&#x27;</span>)[<span class="hljs-number">1</span>].setAttribute(<span class="hljs-string">&#x27;class&#x27;</span>,<span class="hljs-string">&#x27;test&#x27;</span>); <span class="hljs-comment">//还原</span><br>     <span class="hljs-built_in">console</span>.log(cont);<br><br>    <span class="hljs-comment">//.classList</span><br>    <span class="hljs-comment">//add：添加类</span><br>    cont[<span class="hljs-number">1</span>].classList.add(<span class="hljs-string">&#x27;demo&#x27;</span>);<br>    <span class="hljs-comment">//contains：检测类</span><br>    <span class="hljs-built_in">console</span>.log(cont[<span class="hljs-number">1</span>].classList.contains(<span class="hljs-string">&#x27;demo&#x27;</span>));<br>    <span class="hljs-comment">//remove：删除类</span><br>   cont[<span class="hljs-number">1</span>].classList.remove(<span class="hljs-string">&#x27;demo&#x27;</span>);<br>    <span class="hljs-comment">//toggle：有则删除，无则添加</span><br>    cont[<span class="hljs-number">1</span>].onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>        cont[<span class="hljs-number">1</span>].classList.toggle(<span class="hljs-string">&#x27;demo&#x27;</span>);<br>    &#125;;<br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<p>可用功能：点击某个区域后，触发css样式的改变！</p>
<h3 id="17-6-2-操作具体样式"><a href="#17-6-2-操作具体样式" class="headerlink" title="17.6.2 操作具体样式"></a>17.6.2 操作具体样式</h3><h4 id="17-6-2-1-获取内联样式"><a href="#17-6-2-1-获取内联样式" class="headerlink" title="17.6.2.1 获取内联样式"></a>17.6.2.1 获取内联样式</h4><p><strong>style属性</strong></p>
<p>定义：节点的style属性，包含所有的css属性。</p>
<p>通过访问这个对象下面具体的属性获取这个节点的某个内联样式内容；</p>
<p>通过style属性下面的cssText属性，可以获取到这个节点的所有内联样式内容，不过返回的是字符串。</p>
<figure class="highlight stylus"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br></pre></td><td class="code"><pre><code class="hljs stylus">节点<span class="hljs-selector-class">.style</span>.样式属性名 <span class="hljs-comment">// 获取某个具体的内联样式</span><br>节点<span class="hljs-selector-class">.style</span><span class="hljs-selector-class">.cssText</span> <span class="hljs-comment">// 获取某个节点的所有内联样式，返回字符串</span><br></code></pre></td></tr></table></figure>

<p><strong>注意</strong>：访问某个节点的某个具体的样式的时候，如果这个样式如font-size这样的需要使用<strong>驼峰命名法</strong>写成 fontSize这样。</p>
<p><strong>getComputedStyle(略)</strong></p>
<p>getComputedStyle是window的方法。它能够获取当前元素所有最终使用的CSS属性值，只读。它有两个参数，第一个为传入的节点，第二个可以传入:hover,:blur等获取其伪类样式，如果没有则传入null。</p>
<p>注意：IE并不支持getComputedStyle方法，可以使currentStyle来保持兼容性</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width:300px;height:100px;background-color:red;&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <br>window.onload=function()&#123; <br> var oBox = document.getElementById(&quot;box&quot;); <br> alert(getElementStyle(oBox,&quot;backgroundColor&quot;)); <br>&#125; <br>function getElementStyle(obj,attr)&#123; <br> if(obj.currentStyle)&#123; <br> return obj.currentStyle[attr]; <br> &#125;else&#123; <br> return getComputedStyle(obj,null)[attr]; <br> &#125; <br>&#125; <br></code></pre></td></tr></table></figure>

<h4 id="17-6-2-2-设置内联样式"><a href="#17-6-2-2-设置内联样式" class="headerlink" title="17.6.2.2 设置内联样式"></a>17.6.2.2 设置内联样式</h4><p>通过设置节点的style属性下面的属性可以设置节点的某个内联样式。 </p>
<p>通过style属性下面的cssText属性，可以设置这个节点的所有内联样式。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn1&quot;</span>&gt;</span>设置背景颜色<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <br><span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;btn2&quot;</span>&gt;</span>设置字体颜色、字体大小、背景颜色<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span> <br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;box&quot;</span>&gt;</span>前端开发<span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript">  <span class="hljs-keyword">var</span> box = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;box&quot;</span>); </span><br><span class="javascript"> <span class="hljs-keyword">var</span> btn1 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn1&quot;</span>); </span><br><span class="javascript"> <span class="hljs-keyword">var</span> btn2 = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&quot;btn2&quot;</span>); </span><br><span class="javascript"><span class="hljs-comment">//添加单个内联样式</span></span><br><span class="javascript"> btn1.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123; </span><br><span class="javascript">box.style.backgroundColor = <span class="hljs-string">&quot;red&quot;</span>; </span><br> &#125; <br><span class="javascript"><span class="hljs-comment">//添加多个内联样式</span></span><br><span class="javascript"> btn2.onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123; </span><br><span class="javascript">box.style.cssText = <span class="hljs-string">&quot;font-size:32px;color:white;background-color:green;&quot;</span>; </span><br> &#125; <br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span> <br></code></pre></td></tr></table></figure>



<h2 id="17-8-课后实训"><a href="#17-8-课后实训" class="headerlink" title="17.8 课后实训"></a>17.8 课后实训</h2><p>1、实现表格隔行变色效果，需求如下： </p>
<p>&gt;隔行变色 &gt; 鼠标进入高亮显示，移开恢复原来的颜色</p>
<ul>
<li>事件：<ul>
<li>onload：页面加载自动启动</li>
<li>onclick ：单击</li>
<li>onmouseover：双击 </li>
<li>onmouseover ：鼠标移入</li>
<li>onmousemove ：鼠标移动</li>
<li>onmouseout：鼠标移出</li>
<li>onkeydown ：按下任意键</li>
<li>onkeyup ：松开任意键</li>
<li>onkeypress ：输入</li>
<li>onblur ：失去焦点</li>
<li>onfoucs ：获得焦点</li>
<li>onresize：改变窗口大小</li>
<li>可以通过console.log(document)找开头为on的查找。</li>
<li>onsubmit：提交事件</li>
<li>onreset：重置事件</li>
<li>onchange：内容改变</li>
<li>onmousedown：按下鼠标</li>
<li>onmouseout：松开鼠标 </li>
</ul>
</li>
</ul>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;Document&lt;/title&gt;<br>    &lt;style&gt;<br>        th &#123;<br>            background-color: #169be7;<br>            color: #fff;<br>            width:100px;<br>        &#125;<br>        tr&#123;<br>            text-align:center;<br>            cursor: pointer;<br>        &#125;<br>    &lt;/style&gt;<br>&lt;/head&gt;<br>&lt;body&gt;<br>    &lt;table&gt;<br>        &lt;tr&gt;<br>            &lt;th&gt;序号&lt;/th&gt;<br>            &lt;th&gt;姓名&lt;/th&gt;<br>            &lt;th&gt;课程&lt;/th&gt;<br>            &lt;th&gt;成绩&lt;/th&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">1</span>&lt;/td&gt;<br>            &lt;td&gt;徐&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">98</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">2</span>&lt;/td&gt;<br>            &lt;td&gt;徐&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">100</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">3</span>&lt;/td&gt;<br>            &lt;td&gt;楚&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">65</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">4</span>&lt;/td&gt;<br>            &lt;td&gt;楚&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">80</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">5</span>&lt;/td&gt;<br>            &lt;td&gt;张&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">90</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">6</span>&lt;/td&gt;<br>            &lt;td&gt;张&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">90</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>    &lt;/table&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br><br>    <span class="hljs-keyword">let</span> table = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;table&#x27;</span>)[<span class="hljs-number">0</span>];<br>    <span class="hljs-built_in">console</span>.log(table);<br>    <span class="hljs-keyword">let</span> tr = table.getElementsByTagName(<span class="hljs-string">&#x27;tr&#x27;</span>);<br>    <span class="hljs-built_in">console</span>.log(tr);<br>    <span class="hljs-comment">// 实现跳变色序列</span><br>    <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i = <span class="hljs-number">0</span>;i&lt;tr.length;i++)&#123;<br>        <span class="hljs-keyword">if</span>(i%<span class="hljs-number">2</span> === <span class="hljs-number">1</span>)&#123;<br>            <span class="hljs-built_in">console</span>.log(tr[i]);<br>            tr[i].style.backgroundColor = <span class="hljs-string">&#x27;#777&#x27;</span>;<br>            tr[i].onmouseout = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-built_in">this</span>.style.backgroundColor = <span class="hljs-string">&#x27;#777&#x27;</span>;<br>        &#125;<br>        &#125;<span class="hljs-keyword">else</span>&#123;<br>            tr[i].style.backgroundColor = <span class="hljs-string">&#x27;#aaa&#x27;</span>;<br>            tr[i].onmouseout = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-built_in">this</span>.style.backgroundColor = <span class="hljs-string">&#x27;#aaa&#x27;</span>;<br>        &#125;;<br>        &#125;<br>        tr[i].onmouseover = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-built_in">this</span>.style.backgroundColor = <span class="hljs-string">&#x27;yellow&#x27;</span>;<br>        &#125;;<br>        <br>    &#125;<br>    <span class="hljs-comment">// </span><br><br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<p>讲义答案：</p>
<figure class="highlight js"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br><span class="line">77</span><br><span class="line">78</span><br><span class="line">79</span><br><span class="line">80</span><br><span class="line">81</span><br><span class="line">82</span><br><span class="line">83</span><br><span class="line">84</span><br><span class="line">85</span><br><span class="line">86</span><br><span class="line">87</span><br><span class="line">88</span><br><span class="line">89</span><br><span class="line">90</span><br><span class="line">91</span><br><span class="line">92</span><br><span class="line">93</span><br><span class="line">94</span><br><span class="line">95</span><br><span class="line">96</span><br><span class="line">97</span><br><span class="line">98</span><br><span class="line">99</span><br></pre></td><td class="code"><pre><code class="hljs js">&lt;!DOCTYPE html&gt;<br>&lt;html lang=<span class="hljs-string">&quot;en&quot;</span>&gt;<br>&lt;head&gt;<br>    &lt;meta charset=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;<br>    &lt;meta http-equiv=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> content=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;<br>    &lt;meta name=<span class="hljs-string">&quot;viewport&quot;</span> content=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;<br>    &lt;title&gt;表格操作&lt;/title&gt;<br>&lt;/head&gt;<br>&lt;style&gt;<br>    *&#123;<br>        margin: <span class="hljs-number">0</span>;<br>        padding: <span class="hljs-number">0</span>;<br>    &#125;<br>    table&#123;<br>        border-collapse: collapse;<br>        margin: 50px auto;<br>    &#125;<br>    tr&#123;<br>        text-align: center;<br>    &#125;<br>    th,td&#123;<br>        height: 35px;<br>    &#125;<br>    td&#123;<br>        cursor: pointer;<br>    &#125;<br>    th &#123;<br>        background-color: rgb(<span class="hljs-number">0</span>,<span class="hljs-number">153</span>,<span class="hljs-number">203</span>);<br>        color: #fff;<br>    &#125;<br>    tbody tr:nth-<span class="hljs-function"><span class="hljs-title">child</span>(<span class="hljs-params">even</span>)</span>&#123; <span class="hljs-comment">/*偶数*/</span><br>        background-color: #eee;<br>    &#125;<br>    tbody tr:nth-<span class="hljs-function"><span class="hljs-title">child</span>(<span class="hljs-params">odd</span>)</span>&#123; <span class="hljs-comment">/*奇数*/</span><br>        background-color: #999;<br>    &#125;<br>&lt;/style&gt;<br>&lt;body&gt;<br>    &lt;table border=<span class="hljs-string">&#x27;1&#x27;</span> width=<span class="hljs-string">&#x27;400&#x27;</span>&gt;<br>        &lt;thead&gt;<br>            &lt;tr&gt;<br>            &lt;th&gt;序号&lt;/th&gt;<br>            &lt;th&gt;姓名&lt;/th&gt;<br>            &lt;th&gt;课程&lt;/th&gt;<br>            &lt;th&gt;成绩&lt;/th&gt;<br>        &lt;/tr&gt;<br>    &lt;/thead&gt;<br>        &lt;tbody&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">1</span>&lt;/td&gt;<br>            &lt;td&gt;徐&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">98</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">2</span>&lt;/td&gt;<br>            &lt;td&gt;徐&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">100</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">3</span>&lt;/td&gt;<br>            &lt;td&gt;楚&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">65</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">4</span>&lt;/td&gt;<br>            &lt;td&gt;楚&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">80</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">5</span>&lt;/td&gt;<br>            &lt;td&gt;张&lt;/td&gt;<br>            &lt;td&gt;数据结构&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">90</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>        &lt;tr&gt;<br>            &lt;td&gt;<span class="hljs-number">6</span>&lt;/td&gt;<br>            &lt;td&gt;张&lt;/td&gt;<br>            &lt;td&gt;操作系统&lt;/td&gt;<br>            &lt;td&gt;<span class="hljs-number">90</span>&lt;/td&gt;<br>        &lt;/tr&gt;<br>    &lt;/tbody&gt;<br>    &lt;/table&gt;<br>&lt;/body&gt;<br>&lt;script&gt;<br>    <span class="hljs-keyword">let</span> tr = <span class="hljs-built_in">document</span>.getElementsByTagName(<span class="hljs-string">&#x27;tbody&#x27;</span>)[<span class="hljs-number">0</span>].getElementsByTagName(<span class="hljs-string">&#x27;tr&#x27;</span>);<br>    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> tr)&#123;<br>        tr[i].onmouseover = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-built_in">this</span>.style.backgroundColor = <span class="hljs-string">&#x27;yellow&#x27;</span>;<br>    &#125;;<br>        tr[i].onmouseout= <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;<br>            <span class="hljs-built_in">this</span>.style.backgroundColor =<span class="hljs-string">&#x27;&#x27;</span>; <span class="hljs-comment">//精髓！！！</span><br>    &#125;;<br>    &#125;<br>&lt;/script&gt;<br>&lt;/html&gt;<br></code></pre></td></tr></table></figure>

<p>2、实现相册功能。需求如下： 点击小图片，让下面的大图片修改路径为相应的大图片，让下面的图片说明修改innerHTML。</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">http-equiv</span>=<span class="hljs-string">&quot;X-UA-Compatible&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;IE=edge&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">name</span>=<span class="hljs-string">&quot;viewport&quot;</span> <span class="hljs-attr">content</span>=<span class="hljs-string">&quot;width=device-width, initial-scale=1.0&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>轮播图<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><br><span class="css">        <span class="hljs-selector-tag">h2</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">margin-left</span>: <span class="hljs-number">40px</span>;</span><br>        &#125;<br>        .digitial&#123;<br><span class="css">            <span class="hljs-attribute">width</span>:<span class="hljs-number">800px</span>;</span><br><span class="css">            <span class="hljs-attribute">border</span>: <span class="hljs-number">2px</span> <span class="hljs-number">#8080ff</span> solid;</span><br>        &#125;<br><span class="css">        <span class="hljs-selector-tag">ul</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">overflow</span>: hidden;</span><br>        &#125;<br><span class="css">        <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="css">            <span class="hljs-attribute">list-style</span>: none;</span><br><span class="css">            <span class="hljs-attribute">float</span><span class="hljs-selector-pseudo">:left</span>;</span><br><span class="css">            <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">20px</span>;</span><br>        &#125;<br>        .big&#123;<br><span class="css">            <span class="hljs-attribute">width</span>:<span class="hljs-number">100%</span>;</span><br><span class="css">            <span class="hljs-attribute">display</span>: flex;</span><br>        &#125;<br>        #display&#123;<br><span class="css">            <span class="hljs-attribute">flex</span>: <span class="hljs-number">1</span>;</span><br>        &#125;<br>    <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;digitial&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>相册<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/Heavenly fragments_83355995.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;1&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 150px;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/アークナイツ_81306280_p0.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;2&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 150px;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/読書の秋_77843801.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;3&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 150px;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>            <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/💚🖤💛_77153324.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;4&quot;</span> <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 175px;&quot;</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;small&quot;</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>        <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;big&quot;</span>&gt;</span><br>        <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;../imgs/Heavenly fragments_83355995.png&quot;</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">&quot;&quot;</span> <span class="hljs-attr">id</span>=<span class="hljs-string">&quot;display&quot;</span></span><br><span class="hljs-tag">        <span class="hljs-attr">style</span>=<span class="hljs-string">&quot;width: 600px;&quot;</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br>    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">    <span class="hljs-keyword">let</span> imgs = <span class="hljs-built_in">document</span>.getElementsByClassName(<span class="hljs-string">&#x27;small&#x27;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">let</span> loading =  <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;display&#x27;</span>);</span><br><span class="javascript">    <span class="hljs-keyword">let</span> show = <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">&#x27;1&#x27;</span>);</span><br><span class="javascript">    <span class="hljs-built_in">console</span>.log(imgs);</span><br><span class="javascript">    <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> i <span class="hljs-keyword">in</span> imgs)&#123;</span><br><span class="javascript">        imgs[i].onclick = <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>)</span>&#123;</span><br><span class="javascript">            show.style.opacity = <span class="hljs-string">&#x27;1&#x27;</span>;</span><br><span class="javascript">            <span class="hljs-built_in">this</span>.style.opacity = <span class="hljs-string">&quot;0.5&quot;</span>;</span><br><span class="javascript">            show = <span class="hljs-built_in">this</span>;</span><br><span class="javascript">            loading.setAttribute(<span class="hljs-string">&#x27;src&#x27;</span>,<span class="hljs-built_in">this</span>.getAttribute(<span class="hljs-string">&#x27;src&#x27;</span>));</span><br>        &#125;<br>    &#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>

<p>讲义答案：</p>
<figure class="highlight html"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br><span class="line">11</span><br><span class="line">12</span><br><span class="line">13</span><br><span class="line">14</span><br><span class="line">15</span><br><span class="line">16</span><br><span class="line">17</span><br><span class="line">18</span><br><span class="line">19</span><br><span class="line">20</span><br><span class="line">21</span><br><span class="line">22</span><br><span class="line">23</span><br><span class="line">24</span><br><span class="line">25</span><br><span class="line">26</span><br><span class="line">27</span><br><span class="line">28</span><br><span class="line">29</span><br><span class="line">30</span><br><span class="line">31</span><br><span class="line">32</span><br><span class="line">33</span><br><span class="line">34</span><br><span class="line">35</span><br><span class="line">36</span><br><span class="line">37</span><br><span class="line">38</span><br><span class="line">39</span><br><span class="line">40</span><br><span class="line">41</span><br><span class="line">42</span><br><span class="line">43</span><br><span class="line">44</span><br><span class="line">45</span><br><span class="line">46</span><br><span class="line">47</span><br><span class="line">48</span><br><span class="line">49</span><br><span class="line">50</span><br><span class="line">51</span><br><span class="line">52</span><br><span class="line">53</span><br><span class="line">54</span><br><span class="line">55</span><br><span class="line">56</span><br><span class="line">57</span><br><span class="line">58</span><br><span class="line">59</span><br><span class="line">60</span><br><span class="line">61</span><br><span class="line">62</span><br><span class="line">63</span><br><span class="line">64</span><br><span class="line">65</span><br><span class="line">66</span><br><span class="line">67</span><br><span class="line">68</span><br><span class="line">69</span><br><span class="line">70</span><br><span class="line">71</span><br><span class="line">72</span><br><span class="line">73</span><br><span class="line">74</span><br><span class="line">75</span><br><span class="line">76</span><br></pre></td><td class="code"><pre><code class="hljs html"><span class="hljs-meta">&lt;!DOCTYPE <span class="hljs-meta-keyword">html</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">html</span> <span class="hljs-attr">lang</span>=<span class="hljs-string">&quot;en&quot;</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">head</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">meta</span> <span class="hljs-attr">charset</span>=<span class="hljs-string">&quot;UTF-8&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">title</span>&gt;</span>相册<span class="hljs-tag">&lt;/<span class="hljs-name">title</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">style</span>&gt;</span><br>    *&#123;<br><span class="css">      <span class="hljs-attribute">margin</span>: <span class="hljs-number">0</span>;</span><br><span class="css">      <span class="hljs-attribute">padding</span>: <span class="hljs-number">0</span>;</span><br>    &#125;<br>    .wrapper&#123;<br><span class="css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">600px</span>;</span><br><span class="css">      <span class="hljs-attribute">margin</span>: <span class="hljs-number">50px</span> auto <span class="hljs-number">0</span>;</span><br><span class="css">      <span class="hljs-attribute">border</span>: <span class="hljs-number">1px</span> solid <span class="hljs-number">#aaa</span>;</span><br><span class="css">      <span class="hljs-attribute">padding</span>: <span class="hljs-number">20px</span>;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-tag">h2</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-tag">ul</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">overflow</span>: hidden;</span><br><span class="css">      <span class="hljs-attribute">margin-bottom</span>: <span class="hljs-number">20px</span>;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">list-style-type</span>: none;</span><br><span class="css">      <span class="hljs-attribute">float</span>: left;</span><br><span class="css">      <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">10px</span>;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span><span class="hljs-selector-pseudo">:last-child</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">margin-right</span>: <span class="hljs-number">0</span>;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-tag">ul</span> <span class="hljs-selector-tag">li</span> <span class="hljs-selector-tag">img</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">142px</span>;</span><br><span class="css">      <span class="hljs-attribute">cursor</span>: pointer;</span><br>    &#125;<br><span class="css">    <span class="hljs-selector-class">.wrapper</span>&gt;<span class="hljs-selector-tag">img</span>&#123;</span><br><span class="css">      <span class="hljs-attribute">width</span>: <span class="hljs-number">100%</span>;</span><br>    &#125;<br>  <span class="hljs-tag">&lt;/<span class="hljs-name">style</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">head</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;wrapper&quot;</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">h2</span>&gt;</span>美女相册<span class="hljs-tag">&lt;/<span class="hljs-name">h2</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">hr</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;photo-item&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;images/05-1-small.jpg&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;photo-item&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;images/05-2-small.jpg&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;photo-item&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;images/05-3-small.jpg&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>    <span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span><span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;photo-item&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;images/05-4-small.jpg&quot;</span> /&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span><br>  <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">class</span>=<span class="hljs-string">&quot;large-img&quot;</span> <span class="hljs-attr">src</span>=<span class="hljs-string">&quot;images/05-placeholder.png&quot;</span> /&gt;</span><br>  <span class="hljs-tag">&lt;<span class="hljs-name">p</span>&gt;</span>请选择图片<span class="hljs-tag">&lt;/<span class="hljs-name">p</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">body</span>&gt;</span><br><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><br><span class="javascript">  <span class="hljs-keyword">var</span> img = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;.large-img&#x27;</span>);</span><br><span class="javascript">  <span class="hljs-keyword">var</span> items = <span class="hljs-built_in">document</span>.querySelectorAll(<span class="hljs-string">&#x27;.photo-item&#x27;</span>);</span><br><span class="javascript">  <span class="hljs-keyword">var</span> p = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">&#x27;p&#x27;</span>);</span><br><span class="javascript">  <span class="hljs-keyword">for</span>(<span class="hljs-keyword">var</span> i=<span class="hljs-number">0</span>;i&lt;items.length;i++)&#123;</span><br><span class="javascript">    items[i].onmouseover = <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params"></span>) </span>&#123; <span class="hljs-comment">// onclick 或 onmouseenter</span></span><br><span class="javascript">      <span class="hljs-keyword">var</span> src = <span class="hljs-built_in">this</span>.getAttribute(<span class="hljs-string">&#x27;src&#x27;</span>).replace(<span class="hljs-string">&#x27;-small&#x27;</span>,<span class="hljs-string">&#x27;&#x27;</span>);</span><br><span class="javascript">      img.setAttribute(<span class="hljs-string">&#x27;src&#x27;</span>,src);</span><br><br><span class="javascript">      <span class="hljs-keyword">var</span> idx = src.substr(<span class="hljs-number">10</span>,<span class="hljs-number">1</span>);</span><br><span class="javascript">      <span class="hljs-keyword">var</span> str = <span class="hljs-string">&#x27;&#x27;</span>;</span><br><span class="javascript">      <span class="hljs-keyword">switch</span> (idx)&#123;</span><br><span class="javascript">        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;1&#x27;</span>: str = <span class="hljs-string">&#x27;美女A&#x27;</span>;<span class="hljs-keyword">break</span>;</span><br><span class="javascript">        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;2&#x27;</span>: str = <span class="hljs-string">&#x27;美女B&#x27;</span>;<span class="hljs-keyword">break</span>;</span><br><span class="javascript">        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;3&#x27;</span>: str = <span class="hljs-string">&#x27;美女C&#x27;</span>;<span class="hljs-keyword">break</span>;</span><br><span class="javascript">        <span class="hljs-keyword">case</span> <span class="hljs-string">&#x27;4&#x27;</span>: str = <span class="hljs-string">&#x27;美女D&#x27;</span>;</span><br>      &#125;<br><span class="javascript">      p.innerText = str;<span class="hljs-comment">//s</span></span><br>    &#125;<br>  &#125;<br><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span><br><span class="hljs-tag">&lt;/<span class="hljs-name">html</span>&gt;</span><br></code></pre></td></tr></table></figure>


            </div>
            <hr>
            <div>
              <div class="post-metas mb-3">
                
                
                  <div class="post-meta">
                    <i class="iconfont icon-tags"></i>
                    
                      <a class="hover-with-bg" href="/tags/JS/">JS</a>
                    
                  </div>
                
              </div>
              
                <p class="note note-warning">
                  
                    本博客所有文章除特别声明外，均采用 <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.zh" rel="nofollow noopener">CC BY-SA 4.0 协议</a> ，转载请注明出处！
                  
                </p>
              
              
                <div class="post-prevnext">
                  <article class="post-prev col-6">
                    
                    
                      <a href="/2021/06/02/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A020/">
                        <i class="iconfont icon-arrowleft"></i>
                        <span class="hidden-mobile">jQuery选择器和DOM操作</span>
                        <span class="visible-mobile">上一篇</span>
                      </a>
                    
                  </article>
                  <article class="post-next col-6">
                    
                    
                      <a href="/2021/05/31/%E5%89%8D%E7%AB%AF%E5%AD%A6%E4%B9%A018/">
                        <span class="hidden-mobile">JavaScript高级-面向对象</span>
                        <span class="visible-mobile">下一篇</span>
                        <i class="iconfont icon-arrowright"></i>
                      </a>
                    
                  </article>
                </div>
              
            </div>

            
          </article>
        </div>
      </div>
    </div>
    
      <div class="d-none d-lg-block col-lg-2 toc-container" id="toc-ctn">
        <div id="toc">
  <p class="toc-header"><i class="iconfont icon-list"></i>&nbsp;目录</p>
  <div class="toc-body" id="toc-body"></div>
</div>

      </div>
    
  </div>
</div>

<!-- Custom -->

  <div class="col-lg-7 mx-auto nopadding-x-md">
    <div class="container custom post-custom mx-auto">
      <img src="https://octodex.github.com/images/jetpacktocat.png" srcset="/img/loading.gif" class="rounded mx-auto d-block mt-5" style="width:150px; height:150px;">
    </div>
  </div>


    

    
      <a id="scroll-top-button" href="#" role="button">
        <i class="iconfont icon-arrowup" aria-hidden="true"></i>
      </a>
    

    
      <div class="modal fade" id="modalSearch" tabindex="-1" role="dialog" aria-labelledby="ModalLabel"
     aria-hidden="true">
  <div class="modal-dialog modal-dialog-scrollable modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-header text-center">
        <h4 class="modal-title w-100 font-weight-bold">搜索</h4>
        <button type="button" id="local-search-close" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body mx-3">
        <div class="md-form mb-5">
          <input type="text" id="local-search-input" class="form-control validate">
          <label data-error="x" data-success="v"
                 for="local-search-input">关键词</label>
        </div>
        <div class="list-group" id="local-search-result"></div>
      </div>
    </div>
  </div>
</div>
    

    
  </main>

  <footer class="text-center mt-5 py-3">
  <div class="footer-content">
     <a href="https://hexo.io" target="_blank" rel="nofollow noopener"><span>Hexo</span></a> <i class="iconfont icon-love"></i> <a href="https://github.com/fluid-dev/hexo-theme-fluid" target="_blank" rel="nofollow noopener"><span>Fluid</span></a> 
  </div>
  

  
  <!-- 备案信息 -->
  <div class="beian">
    <span>
      <a href="http://beian.miit.gov.cn/" target="_blank" rel="nofollow noopener">
        京ICP证123456号
      </a>
    </span>
    
      
        <span>
          <a
            href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=12345678"
            rel="nofollow noopener"
            class="beian-police"
            target="_blank"
          >
            
              <span style="visibility: hidden; width: 0">|</span>
              <img src="/img/police_beian.png" srcset="/img/loading.gif" alt="police-icon"/>
            
            <span>京公网安备12345678号</span>
          </a>
        </span>
      
    
  </div>


  
</footer>

<!-- SCRIPTS -->

  <script  src="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.js" ></script>
  <link  rel="stylesheet" href="https://cdn.jsdelivr.net/npm/nprogress@0.2.0/nprogress.min.css" />

  <script>
    NProgress.configure({"showSpinner":false,"trickleSpeed":100})
    NProgress.start()
    window.addEventListener('load', function() {
      NProgress.done();
    })
  </script>


<script  src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js" ></script>
<script  src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" ></script>
<script  src="/js/debouncer.js" ></script>
<script  src="/js/events.js" ></script>
<script  src="/js/plugins.js" ></script>

<!-- Plugins -->


  
    <script  src="/js/lazyload.js" ></script>
  



  



  <script  src="https://cdn.jsdelivr.net/npm/tocbot@4.12.0/dist/tocbot.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/@fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js" ></script>



  <script  src="https://cdn.jsdelivr.net/npm/anchor-js@4.3.0/anchor.min.js" ></script>



  <script defer src="https://cdn.jsdelivr.net/npm/clipboard@2.0.6/dist/clipboard.min.js" ></script>



  <script defer src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js" ></script>




  <script  src="https://cdn.jsdelivr.net/npm/typed.js@2.0.11/lib/typed.min.js" ></script>
  <script>
    (function (window, document) {
      var typing = Fluid.plugins.typing;
      var title = document.getElementById('subtitle').title;
      
      typing(title)
      
    })(window, document);
  </script>



  <script  src="/js/local-search.js" ></script>
  <script>
    (function () {
      var path = "/local-search.xml";
      $('#local-search-input').on('click', function() {
        searchFunc(path, 'local-search-input', 'local-search-result');
      });
      $('#modalSearch').on('shown.bs.modal', function() {
        $('#local-search-input').focus();
      });
    })()
  </script>















<!-- 主题的启动项 保持在最底部 -->
<script  src="/js/boot.js" ></script>



<script src="/live2dw/lib/L2Dwidget.min.js?094cbace49a39548bed64abff5988b05"></script><script>L2Dwidget.init({"pluginRootPath":"live2dw/","pluginJsPath":"lib/","pluginModelPath":"assets/","tagMode":false,"debug":false,"model":{"scale":1,"hHeadPos":0.5,"vHeadPos":0.618,"jsonPath":"/live2dw/assets/shizuku.model.json"},"display":{"superSample":2,"width":150,"height":300,"position":"right","hOffset":0,"vOffset":-20},"mobile":{"show":true,"scale":0.5},"react":{"opacityDefault":0.7,"opacityOnHover":0.8},"log":false});</script></body>
</html>
